/*
Theme Name: Rosa Azul
Theme URI: https://rosaazul.eu/
Author: Rosa Azul
Author URI: https://rosaazul.eu/
Description: Tema one-page da Rosa Azul — limpeza premium, consultoria, produtos próprios e Rosa Azul Academy. Conversão fiel do site estático original.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rosa-azul
*/

:root{
    --deep-blue:#173A63;
    --deep-blue-dark:#102B4A;
    --stained-blue:#2F6FCB;
    --light-blue:#A7CFF2;
    --gold:#B99355;
    --gold-soft:rgba(185,147,85,.55);
    --ivory:#F5EFE4;
    --linen:#FFFDF8;
    --sand:#E3D8C8;
    --graphite:#4A4843;
    --marble:#CFC8BE;
    --leaf:#4F8B72;
    --nav-ink:#343434;

    --font-serif:'Cormorant Garamond','Playfair Display',Georgia,serif;
    --font-sans:'Inter','Avenir',Arial,sans-serif;

    --radius-sm:2px;
    --radius-card:8px;
    --shadow-subtle:0 12px 40px rgba(23,58,99,.06);
    --pad:clamp(24px,5vw,66px);

    /* standardized vertical rhythm */
    --header-h:108px;
    --space-section:clamp(88px,11vh,150px);   /* top & bottom padding of every section */
    --space-head:clamp(48px,6vh,72px);        /* gap below a section heading */
    --space-block:clamp(28px,4vh,44px);       /* gap between major blocks */
    --maxw:1240px;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{
    scroll-behavior:smooth;
    scroll-snap-type:y proximity;
    scroll-padding-top:var(--header-h);
  }
  body{
    font-family:var(--font-sans);
    color:var(--graphite);
    background:var(--linen);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  h1,h2,h3{font-family:var(--font-serif);font-weight:500;color:var(--deep-blue);line-height:1.1}

  /* ---------- shared bits ---------- */
  .eyebrow{
    font-family:var(--font-sans);font-weight:600;font-size:12px;
    letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
    display:inline-flex;align-items:center;gap:14px;
  }
  .eyebrow::after{content:"";width:38px;height:1px;background:var(--gold-soft)}
  .eyebrow.center{justify-content:center}
  .eyebrow.center::before{content:"";width:38px;height:1px;background:var(--gold-soft)}

  .ornament{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--gold);margin:0 auto}
  .ornament svg{width:54px;height:14px}

  .btn{
    display:inline-flex;align-items:center;gap:12px;
    font-family:var(--font-sans);font-weight:600;font-size:13px;
    letter-spacing:.16em;text-transform:uppercase;
    height:62px;padding:0 30px;border-radius:var(--radius-sm);
    border:1px solid var(--gold);cursor:pointer;
    transition:transform .25s ease,background .25s ease,color .25s ease,box-shadow .25s ease;
  }
  .btn svg{width:18px;height:9px;opacity:.85;transition:transform .25s ease}
  .btn:hover svg{transform:translateX(4px)}
  .btn--primary{background:var(--deep-blue);color:var(--linen)}
  .btn--primary:hover{background:var(--deep-blue-dark);transform:translateY(-2px);box-shadow:0 14px 30px rgba(23,58,99,.18)}
  .btn--secondary{background:rgba(255,253,248,.78);color:var(--nav-ink)}
  .btn--secondary:hover{background:var(--ivory);transform:translateY(-2px)}
  .btn:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

  /* ---------- header ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    height:108px;display:flex;align-items:center;
    padding:0 var(--pad);
    transition:background .3s ease,box-shadow .3s ease,height .3s ease;
  }
  header.scrolled{
    height:84px;background:rgba(255,253,248,.94);
    backdrop-filter:blur(12px);
    box-shadow:0 1px 0 rgba(207,200,190,.5);
  }
  .nav-inner{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
  /* .brand nunca encolhe: era um flex item encolhível e o `img{max-width:100%}`
     global comprimia a largura enquanto o `height` fixo mantinha a altura,
     deformando o logótipo (e zerando-o) entre 761px e 1023px. */
  .brand{flex:0 0 auto;display:inline-flex;align-items:center}
  .brand img{height:64px;width:auto;max-width:none;object-fit:contain;transition:height .3s ease}
  header.scrolled .brand img{height:52px}
  nav.main{display:flex;gap:clamp(14px,1.6vw,30px)}
  nav.main a{
    font-size:14px;color:var(--nav-ink);position:relative;padding:6px 0;
    transition:color .2s ease;
  }
  nav.main a::after{
    content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
    background:var(--gold);transition:width .3s ease;
  }
  nav.main a:hover{color:var(--deep-blue)}
  nav.main a:hover::after,nav.main a.active::after{width:100%}
  nav.main a.active{color:var(--deep-blue)}

  .header-cta{
    display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 28px;
    border:1px solid var(--gold);border-radius:var(--radius-sm);
    font-size:13px;letter-spacing:.1em;color:var(--linen);background:var(--deep-blue);
    position:relative;transition:background .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease;white-space:nowrap;
  }
  .header-cta::after{
    content:"";width:9px;height:9px;background:var(--gold);
    clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);flex-shrink:0;
  }
  .header-cta:hover{background:var(--deep-blue-dark);transform:translateY(-1px);box-shadow:0 10px 24px rgba(23,58,99,.2)}

  .menu-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
  .menu-toggle span{width:26px;height:2px;background:var(--deep-blue);transition:.3s}
  .mobile-menu{display:none}

  /* ---------- hero ---------- */
  .hero{
    position:relative;min-height:100vh;display:flex;align-items:center;
    padding-top:var(--header-h);overflow:hidden;background:var(--ivory);
    scroll-snap-align:start;
  }
  .hero-bg{
    position:absolute;inset:0;z-index:0;
    background:url('assets/img/hero-bg.jpg') center center/cover no-repeat;
  }
  .hero-overlay{
    position:absolute;inset:0;z-index:1;
    background:linear-gradient(105deg,
      rgba(255,253,248,.99) 0%,
      rgba(255,253,248,.97) 30%,
      rgba(255,253,248,.82) 48%,
      rgba(255,253,248,.28) 64%,
      rgba(255,253,248,.04) 100%);
  }
  .hero-inner{
    position:relative;z-index:2;width:100%;
    padding:48px var(--pad) 64px;
  }
  .hero-content{max-width:680px}
  .hero h1{
    font-size:clamp(40px,5.4vw,62px);font-weight:500;letter-spacing:-.01em;
    margin:30px 0 26px;color:var(--deep-blue);
  }
  .hero h1 em{font-style:italic;color:var(--gold);font-weight:500}
  .hero p.lead{
    font-size:clamp(16px,1.3vw,19px);max-width:560px;color:var(--graphite);
    margin-bottom:42px;
  }
  .hero-actions{display:flex;flex-wrap:wrap;gap:22px}

  /* ---------- value bar ---------- */
  .value-bar{
    position:relative;z-index:5;margin:-90px var(--pad) 0;
    background:rgba(255,253,248,.95);backdrop-filter:blur(6px);
    border:1px solid var(--gold);border-radius:var(--radius-card);
    box-shadow:var(--shadow-subtle);
    display:grid;grid-template-columns:repeat(4,1fr);
  }
  .value-item{
    display:flex;gap:18px;align-items:flex-start;
    padding:36px 34px;position:relative;
  }
  .value-item:not(:last-child)::after{
    content:"";position:absolute;right:0;top:26%;height:48%;width:1px;
    background:var(--gold-soft);
  }
  /* O último filho de .value-bar é o ornamento, não o 4.º card — por isso
     `:not(:last-child)` acertava também no card 4 e desenhava uma divisória
     por cima da borda direita da barra (duplicando a linha dourada). */
  .value-item:nth-child(4)::after{display:none}
  .value-item svg{width:42px;height:42px;flex-shrink:0;stroke:var(--gold);fill:none;stroke-width:1.5}
  .value-item h4{
    font-family:var(--font-sans);font-weight:600;font-size:13px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--nav-ink);margin-bottom:8px;
  }
  .value-item p{font-size:14.5px;line-height:1.5;color:var(--graphite)}
  /* Centragem sem `transform`: `.value-bar` tem a classe `stagger`, e a regra
     `.stagger.in > *{transform:none}` (especificidade 0,2,1) anulava o
     `translateX(-50%)` (0,1,0), deixando o ornamento 37px à direita do centro.
     `left:0;right:0` + `margin-inline:auto` centra sem depender de transform. */
  .value-bar-orn{
    position:absolute;bottom:-7px;left:0;right:0;
    width:fit-content;margin-inline:auto;
    background:var(--linen);padding:0 10px;color:var(--gold);
  }

  /* ---------- sections ---------- */
  section{
    padding:var(--space-section) var(--pad);
    scroll-snap-align:start;
    scroll-snap-stop:normal;
  }
  .section-head{max-width:720px;margin:0 auto var(--space-head);text-align:center}
  .section-head h2{font-size:clamp(30px,3.6vw,46px);margin:18px 0 16px}
  .section-head p{font-size:17px;color:var(--graphite)}
  .wrap{max-width:var(--maxw);margin:0 auto}

  /* about */
  .about{background:var(--ivory)}
  .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center;max-width:1240px;margin:0 auto}
  .about-text h2{font-size:clamp(28px,3.4vw,44px);margin:18px 0 22px}
  .about-text p{margin-bottom:18px;font-size:16.5px;max-width:520px}
  .pillars{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--sand);border:1px solid var(--sand);border-radius:var(--radius-card);overflow:hidden}
  .pillar{background:var(--linen);padding:34px 30px;transition:background .3s ease}
  .pillar:hover{background:#fffaf0}
  .pillar .num{font-family:var(--font-serif);font-size:26px;color:var(--gold);font-style:italic}
  .pillar h3{font-size:22px;margin:6px 0 10px}
  .pillar p{font-size:14.5px;line-height:1.55}

  /* services */
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1240px;margin:0 auto}
  .card{
    background:var(--linen);border:1px solid rgba(207,200,190,.6);
    border-radius:var(--radius-card);padding:40px 34px;
    transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
  }
  .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-subtle);border-color:var(--gold-soft)}
  .card .icon{
    width:56px;height:56px;border:1px solid var(--gold);border-radius:50%;
    display:flex;align-items:center;justify-content:center;margin-bottom:24px;
  }
  .card .icon svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.5}
  .card h3{font-size:24px;margin-bottom:12px}
  .card p{font-size:15px;line-height:1.6}

  /* method */
  .method{background:var(--deep-blue);color:var(--linen)}
  .method .section-head h2,.method .eyebrow{color:#fff}
  .method .eyebrow{color:var(--light-blue)}
  .method .eyebrow::after,.method .eyebrow::before{background:rgba(185,147,85,.7)}
  .method .section-head p{color:rgba(255,253,248,.78)}
  .dna{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1120px;margin:0 auto}
  .dna-item{
    border:1px solid rgba(185,147,85,.42);border-radius:var(--radius-card);
    padding:22px 22px 34px;background:linear-gradient(180deg,rgba(255,253,248,.06),rgba(255,253,248,.025));
    overflow:hidden;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
  }
  .dna-item:hover{transform:translateY(-6px);box-shadow:0 20px 54px rgba(0,0,0,.18);border-color:rgba(185,147,85,.72)}
  .dna-visual{
    width:100%;aspect-ratio:1/1;margin-bottom:24px;overflow:hidden;
    border-radius:calc(var(--radius-card) - 2px);border:1px solid rgba(185,147,85,.38);
    background:rgba(245,239,228,.06);position:relative;
  }
  .dna-visual::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    box-shadow:inset 0 0 0 1px rgba(255,253,248,.08),inset 0 -70px 90px rgba(23,58,99,.10);
  }
  .dna-visual img{width:100%;height:100%;display:block;object-fit:cover}
  .dna-item .mark{
    font-family:var(--font-sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--gold);margin:4px 0 14px;font-weight:700;display:block;
  }
  .dna-item h3{color:#fff;font-size:24px;margin-bottom:12px}
  .dna-item p{font-size:15.5px;color:rgba(255,253,248,.84);line-height:1.65;margin:0}

  /* products */
  .products{background:var(--ivory)}
  .product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1180px;margin:0 auto}
  .product{
    background:var(--linen);border:1px solid rgba(207,200,190,.55);
    border-radius:var(--radius-card);padding:34px 30px;text-align:center;
    transition:transform .3s ease,box-shadow .3s ease;
  }
  .product:hover{transform:translateY(-5px);box-shadow:var(--shadow-subtle)}
  .product .bottle{
    width:46px;height:64px;margin:0 auto 20px;border:1px solid var(--gold);
    border-radius:6px 6px 4px 4px;position:relative;
  }
  .product .bottle::before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:16px;height:9px;border:1px solid var(--gold);border-bottom:none;border-radius:3px 3px 0 0}
  .product h3{font-size:20px;margin-bottom:6px}
  .product span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;font-family:var(--font-sans)}
  .products-note{text-align:center;margin-top:48px;font-style:italic;font-family:var(--font-serif);font-size:22px;color:var(--deep-blue)}


  /* fronts */
  .fronts{background:var(--linen)}
  .fronts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1240px;margin:0 auto}
  .front-card{
    display:block;background:var(--ivory);border:1px solid rgba(207,200,190,.62);
    border-radius:var(--radius-card);padding:34px 28px;min-height:270px;
    transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease,background .35s ease;
  }
  .front-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-subtle);border-color:var(--gold-soft);background:#fffaf0}
  .front-num{
    display:inline-flex;margin-bottom:18px;font-family:var(--font-serif);font-size:28px;
    color:var(--gold);font-style:italic;
  }
  .front-card h3{font-size:23px;margin-bottom:12px;color:var(--deep-blue)}
  .front-card p{font-size:14.5px;line-height:1.62;color:var(--graphite);margin:0}

  /* consulting */
  .consulting{background:var(--linen)}
  .consult-grid{
    display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(40px,6vw,82px);
    max-width:1180px;margin:0 auto;align-items:center;
  }
  .consult-text h2{font-size:clamp(28px,3.4vw,44px);margin:18px 0 20px}
  .consult-text p{font-size:16.5px;line-height:1.75;max-width:540px;margin-bottom:30px}
  .consult-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .consult-item{
    background:var(--ivory);border:1px solid rgba(207,200,190,.62);
    border-radius:var(--radius-card);padding:28px 26px;
  }
  .consult-item span{
    font-family:var(--font-sans);font-size:11px;letter-spacing:.18em;
    color:var(--gold);font-weight:700;
  }
  .consult-item h3{font-size:20px;margin:12px 0 8px;color:var(--deep-blue)}
  .consult-item p{font-size:14.5px;line-height:1.58;margin:0;color:var(--graphite)}

  /* product lines */
  .product-lines{max-width:1180px;margin:0 auto;display:grid;gap:52px}
  .product-line{
    background:rgba(255,253,248,.62);border:1px solid rgba(207,200,190,.55);
    border-radius:var(--radius-card);padding:clamp(28px,4vw,42px);
  }
  .line-heading{max-width:720px;margin:0 auto 28px;text-align:center}
  .line-label{
    display:inline-flex;font-family:var(--font-sans);font-size:11px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:12px;
  }
  .line-heading h3{font-size:clamp(24px,2.6vw,34px);margin-bottom:10px;color:var(--deep-blue)}
  .line-heading p{font-size:15.5px;line-height:1.65;color:var(--graphite);margin:0 auto}

  /* faq */
  .faq{background:var(--linen)}
  .faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:1120px;margin:0 auto}
  .faq-item{
    background:var(--ivory);border:1px solid rgba(207,200,190,.62);
    border-radius:var(--radius-card);padding:32px 30px;
  }
  .faq-item h3{font-size:22px;margin-bottom:12px;color:var(--deep-blue)}
  .faq-item p{font-size:15px;line-height:1.65;margin:0;color:var(--graphite)}

  /* academy */
  /* Selector de id porque a Academy é a única secção sem classe própria.
     Sem esta regra a secção não tinha fundo e mostrava o --linen do body,
     ficando dois blocos brancos seguidos (Produtos Profissional -> Academy);
     o creme repõe a alternância creme/branco das restantes secções. */
  #academy{background:var(--ivory)}
  .academy-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,80px);align-items:center;max-width:1180px;margin:0 auto}
  .academy-text h2{font-size:clamp(28px,3.4vw,44px);margin:18px 0 20px}
  .academy-text p{font-size:16.5px;margin-bottom:18px;max-width:520px}
  .motto{border-left:2px solid var(--gold);padding:8px 0 8px 26px;margin:30px 0}
  .motto span{display:block;font-family:var(--font-serif);font-style:italic;font-size:24px;color:var(--deep-blue);line-height:1.4}
  .academy-card{
    background:var(--ivory);border:1px solid var(--gold-soft);border-radius:var(--radius-card);
    padding:46px 40px;text-align:center;
  }
  .academy-card .symbol{width:96px;margin:0 auto 22px}
  .academy-card h3{font-size:26px;margin-bottom:8px}
  .academy-card .tag{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;font-family:var(--font-sans)}
  .academy-card ul{list-style:none;text-align:left;margin:26px 0 0;display:inline-block}
  .academy-card li{font-size:14.5px;padding:7px 0 7px 26px;position:relative}
  .academy-card li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;background:var(--gold);rotate:45deg}
  .academy-status{
    display:inline-flex;align-items:center;gap:10px;margin:4px 0 18px;
    padding:8px 14px;border:1px solid var(--gold-soft);border-radius:999px;
    color:var(--gold);font-family:var(--font-sans);font-size:12px;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase;background:rgba(255,253,248,.55);
  }
  .academy-status::before{
    content:"";width:7px;height:7px;background:var(--gold);transform:rotate(45deg);display:inline-block;
  }
  .academy-card--image{
    padding:0;overflow:hidden;justify-self:center;width:100%;max-width:520px;
    background:var(--ivory);box-shadow:0 24px 80px rgba(23,58,99,.08);
  }
  .academy-card--image .academy-preview{
    display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  }

  /* cta band */
  .cta-band{
    text-align:center;background:
      linear-gradient(rgba(23,58,99,.78),rgba(16,43,74,.88)),
      url('assets/img/cta-band-bg.png') center/cover fixed;
    color:var(--linen);
  }
  .cta-band h2{color:#fff;font-size:clamp(30px,4vw,50px);margin:18px 0 20px}
  .cta-band p{color:rgba(255,253,248,.85);max-width:560px;margin:0 auto 36px;font-size:17px}

  /* contact */
  .contact{background:var(--ivory)}
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);max-width:1180px;margin:0 auto;align-items:start}
  .contact-info h2{font-size:clamp(28px,3.4vw,42px);margin:18px 0 22px}
  .contact-info p{max-width:460px;margin-bottom:28px;font-size:16.5px}
  .contact-line{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid rgba(207,200,190,.5)}
  .contact-line svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.5;flex-shrink:0}
  .contact-line span{font-size:15.5px}
  form{background:var(--linen);border:1px solid var(--gold);border-radius:var(--radius-card);padding:clamp(28px,4vw,44px);box-shadow:var(--shadow-subtle)}
  .field{margin-bottom:22px}
  .field label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:9px;font-family:var(--font-sans)}
  .field input,.field textarea,.field select{
    width:100%;padding:15px 16px;border:1px solid var(--marble);border-radius:var(--radius-sm);
    font-family:var(--font-sans);font-size:15px;color:var(--graphite);background:#fff;
    transition:border-color .2s ease,box-shadow .2s ease;
  }
  .field input::placeholder,.field textarea::placeholder{color:#b7b1a8}
  .field input:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(185,147,85,.14)}
  .field textarea{resize:vertical;min-height:120px}
  form .btn{width:100%;justify-content:center;background:var(--deep-blue);color:var(--linen);border:1px solid var(--gold)}
  form .btn:hover{background:var(--deep-blue-dark)}

  /* footer */
  footer{background:var(--deep-blue);color:rgba(255,253,248,.78);padding:72px var(--pad) 0}
  .footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;max-width:1240px;margin:0 auto;padding-bottom:54px;border-bottom:1px solid rgba(185,147,85,.3)}
  .footer-brand img{height:78px;margin-bottom:20px;filter:brightness(0) invert(1) sepia(0)}
  .footer-brand p{font-size:14.5px;max-width:300px;line-height:1.7}
  .footer-sig{font-family:var(--font-serif);font-style:italic;color:var(--gold);font-size:18px;margin-top:16px}
  .footer-col h5{font-family:var(--font-sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
  .footer-col a{display:block;font-size:14.5px;padding:6px 0;color:rgba(255,253,248,.8);transition:color .2s ease}
  .footer-col a:hover{color:#fff}
  .footer-bottom{max-width:1240px;margin:0 auto;padding:28px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:rgba(255,253,248,.55)}
  .footer-bottom .dna{display:inline;font-size:13px;letter-spacing:.04em;color:rgba(255,253,248,.7);font-family:var(--font-sans)}

  /* snap-dot side navigation */
  .snap-nav{
    position:fixed;top:50%;right:26px;transform:translateY(-50%);
    z-index:90;display:flex;flex-direction:column;gap:16px;
    opacity:0;transition:opacity .5s ease;
  }
  .snap-nav.show{opacity:1}
  .snap-nav a{
    width:10px;height:10px;border-radius:50%;
    border:1px solid var(--gold);background:transparent;
    position:relative;transition:background .3s ease,transform .3s ease;
  }
  .snap-nav a::after{
    content:attr(data-label);position:absolute;right:22px;top:50%;transform:translateY(-50%) translateX(6px);
    font-family:var(--font-sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--deep-blue);background:rgba(255,253,248,.92);padding:4px 10px;border-radius:2px;
    white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;
    box-shadow:var(--shadow-subtle);
  }
  .snap-nav a:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
  .snap-nav a:hover{transform:scale(1.25)}
  .snap-nav a.active{background:var(--gold);transform:scale(1.35)}
  .snap-nav a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

  /* reveal animation — snap-aware, staggered */
  .reveal{
    opacity:0;transform:translateY(34px);
    transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--d,0ms);
  }
  .reveal.in{opacity:1;transform:none}

  /* staggered children — each direct child animates in sequence */
  .stagger > *{
    opacity:0;transform:translateY(30px);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
  }
  .stagger.in > *{opacity:1;transform:none}
  .stagger.in > *:nth-child(1){transition-delay:.05s}
  .stagger.in > *:nth-child(2){transition-delay:.15s}
  .stagger.in > *:nth-child(3){transition-delay:.25s}
  .stagger.in > *:nth-child(4){transition-delay:.35s}
  .stagger.in > *:nth-child(5){transition-delay:.45s}
  .stagger.in > *:nth-child(6){transition-delay:.55s}

  /* ---------- responsive ---------- */
  @media(max-width:1100px){
    .cards,.dna,.product-grid,.fronts-grid,.faq-grid{grid-template-columns:repeat(2,1fr)}
    .value-bar{grid-template-columns:repeat(2,1fr)}
    .value-item:nth-child(2)::after{display:none}
    .about-grid,.academy-grid,.contact-grid,.consult-grid{grid-template-columns:1fr}
    .footer-top{grid-template-columns:1fr 1fr}
  }

  /* ---------- Serviços & Método: centra o 3.º card avulso (tablet) ----------
     `.cards`/`.dna` têm sempre 3 filhos. Na faixa 761–1100px a regra acima
     passa a grelha para repeat(2,1fr); com um número ímpar de itens, o
     auto-placement do grid manda o 3.º para a coluna 1 da linha seguinte,
     encostado à esquerda em vez de centrado sob os dois primeiros.
     `grid-column:1/-1` estica-o pelas duas colunas e `justify-self:center` +
     uma largura igual à de UMA coluna recentra-o sem alterar a largura dos
     outros dois cards. Fora desta faixa a regra não tem efeito: em desktop
     (>=1101px) é grid de 3 colunas (nenhum item avulso) e em mobile (<=760px)
     a grelha vira 1 coluna a 100% de largura (grid-column:1/-1 já é o que
     acontece por omissão). */
  @media (min-width:761px) and (max-width:1100px){
    .cards,.dna{
      --two-col-gap:22px;  /* mesmo valor do `gap` definido em .cards/.dna mais abaixo — actualizar aqui se mudar */
    }
    .cards > :last-child,
    .dna > :last-child{
      grid-column:1 / -1;
      justify-self:center;
      width:calc((100% - var(--two-col-gap)) / 2);
    }
  }

  /* ---------- Barra de valores -> "A Empresa": espaço real + ornamento sem fundo (tablet) ----------
     Escopo explícito 761–1023.98px: abaixo disso o mobile já tem a sua própria
     versão do ornamento (bloco "MOBILE REFINO", mais abaixo) e acima disso o
     desktop esconde-o de todo (`.value-bar-orn{display:none}` em >=1024px).

     Nesta faixa a .value-bar cai directamente sobre o #empresa: a barra só
     ganha margin-bottom em desktop (>=1024px), e o ornamento herdava o estilo
     base (`position:absolute;bottom:-7px;background:var(--linen)`) pensado
     para "morder" a borda inferior da barra (metade dentro, metade fora, como
     um rótulo a cortar a linha) — sem margin-bottom por baixo, esse rótulo
     ficava a flutuar directamente sobre "A Empresa", sem abrir espaço real e
     com o fundo branco a destacar-se como um rectângulo solto.
     Aqui mantém-se o mesmo `position:absolute` (continua a flutuar livre, não
     preso à caixa com borda), mas: a barra ganha `margin-bottom` (o espaço
     passa a existir de facto) e o ornamento desce (`bottom` mais negativo, ou
     seja, mais afastado da borda dos cards) para essa margem, ficando mais
     perto de "A Empresa" do que dos cards; sem fundo, sobra só a linha e o
     losango, agora flutuando sobre o --linen da página em vez de sobre um
     rectângulo --linen próprio. */
  @media (min-width:761px) and (max-width:1023.98px){
    .value-bar{
      margin-bottom:clamp(64px,9vw,96px);
    }
    .value-bar-orn{
      bottom:-56px;
      background:transparent;
    }
  }
  @media(max-width:760px){
    nav.main,.header-cta{display:none}
    .snap-nav{display:none}
    .menu-toggle{display:flex}
    header{height:84px}
    .hero-inner{padding:48px var(--pad) 60px}
    .value-bar{margin:32px var(--pad) 0;grid-template-columns:1fr}
    .value-item::after{display:none!important}
    .value-item{border-bottom:1px solid var(--gold-soft);padding:26px 28px}
    .value-item:last-child{border-bottom:none}
    .cards,.dna,.product-grid,.pillars,.fronts-grid,.consult-list,.faq-grid{grid-template-columns:1fr}
    .footer-top{grid-template-columns:1fr}
    .hero-actions .btn{flex:1;justify-content:center}
    .cta-band{background-attachment:scroll}

    /* mobile menu */
    .mobile-menu{
      display:flex;
      position:fixed;inset:0;z-index:99;background:var(--linen);
      transform:translateY(-100%);transition:transform .4s ease;
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px;
    }
    .mobile-menu.open{transform:none}
    .mobile-menu a{font-family:var(--font-serif);font-size:30px;color:var(--deep-blue);padding:10px}
    .mobile-menu .header-cta{display:inline-flex;margin-top:24px}
    .mobile-close{position:absolute;top:28px;right:28px;background:none;border:none;font-size:36px;color:var(--deep-blue);cursor:pointer;line-height:1}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    html{scroll-snap-type:none!important}
    .reveal,.stagger > *{opacity:1!important;transform:none!important}
    .cta-band{background-attachment:scroll}
  }

/* ==========================================================
   Auditoria de alinhamento e responsividade — Rosa Azul
   Objectivo: manter o site onepage, equilibrar as secções,
   padronizar alturas de cards e evitar quebras visuais.
   ========================================================== */
:root{
  --header-h:108px;
  --space-section:clamp(56px,7.2vh,92px);
  --space-head:clamp(30px,4.4vh,48px);
  --space-block:clamp(22px,3.2vh,36px);
  --content-max:1180px;
}

/* Páginas/sectores com ritmo semelhante */
section:not(.hero){
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:var(--space-section);
  padding-bottom:var(--space-section);
}

.section-head{
  margin-bottom:var(--space-head);
}
.section-head h2{
  max-width:860px;
  margin-left:auto;
  margin-right:auto;
}
.section-head p{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}

/* Grids com cards da mesma altura */
.cards,
.dna,
.fronts-grid,
.product-grid,
.faq-grid,
.consult-list{
  align-items:stretch;
}
.card,
.front-card,
.dna-item,
.product,
.faq-item,
.consult-item{
  height:100%;
  display:flex;
  flex-direction:column;
}
.card p,
.front-card p,
.dna-item p,
.faq-item p,
.consult-item p{
  margin-bottom:0;
}

/* Header: evita quebras no CTA/menu em ecrãs intermédios */
.nav-inner{gap:18px}
nav.main{gap:clamp(12px,1.35vw,24px)}
nav.main a{white-space:nowrap}
.header-cta{height:50px;padding:0 22px}

/* Hero: dá respiro sem empurrar a primeira dobra */
.hero-content{max-width:min(760px,92vw)}
.hero h1{max-width:760px}
.hero .lead{max-width:680px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}

/* Frentes: cards uniformes e sem excesso vertical */
.fronts-grid{
  max-width:var(--content-max);
  gap:20px;
}
.front-card{
  min-height:0;
  padding:30px 26px;
}
.front-num{margin-bottom:14px}
.front-card h3{margin-bottom:10px}

/* Empresa: evita blocos muito altos.
   Largura própria (1280px) em vez de --content-max (1180px): a secção tem
   1293px úteis a 1440px, sobravam 113px por usar. */
.about-grid{
  max-width:1280px;
  gap:clamp(34px,5vw,70px);
}
.pillars{align-self:stretch}
.pillar{
  min-height:0;
  padding:clamp(24px,3vw,32px);
}

/* Serviços */
.cards{
  max-width:var(--content-max);
  gap:22px;
}
.card{
  padding:34px 30px;
}
.card .icon{
  margin-bottom:20px;
}

/* Método: reduz altura visual sem perder a imagem */
.dna{
  max-width:var(--content-max);
  gap:22px;
}
.dna-item{
  padding:18px 18px 28px;
}
.dna-visual{
  margin-bottom:18px;
}
.dna-item .mark{
  margin:2px 0 12px;
}
.dna-item p{
  font-size:15px;
  line-height:1.58;
}

/* Consultoria: alinha texto e cards numa dobra mais limpa */
.consult-grid{
  max-width:var(--content-max);
  gap:clamp(34px,5vw,64px);
}
.consult-text h2{margin-bottom:16px}
.consult-text p{margin-bottom:24px}
.consult-list{gap:16px}
.consult-item{padding:24px 22px}
.consult-item h3{margin:10px 0 6px}

/* Produtos: duas linhas lado a lado no desktop para caber numa secção */
.product-lines{
  max-width:var(--content-max);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
}
.product-line{
  display:flex;
  flex-direction:column;
  padding:clamp(24px,3vw,34px);
  min-height:0;
}
.line-heading{
  margin-bottom:22px;
  min-height:138px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.line-heading h3{
  margin-bottom:8px;
}
.product-line .product-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  flex:1;
}
.product{
  justify-content:center;
  padding:20px 14px;
  min-height:142px;
}
.product .bottle{
  width:34px;
  height:48px;
  margin-bottom:12px;
}
.product .bottle::before{
  width:13px;
  height:7px;
  top:-7px;
}
.product h3{
  font-size:17px;
  line-height:1.18;
}
.product span{
  font-size:10px;
  letter-spacing:.12em;
  line-height:1.3;
}
.products-note{
  margin-top:26px;
  font-size:20px;
}

/* Academy: quadro visual dimensionado para caber melhor */
.academy-grid{
  max-width:var(--content-max);
  gap:clamp(34px,5vw,64px);
}
.academy-text h2{margin-bottom:16px}
.academy-text p{margin-bottom:14px}
.motto{
  margin:22px 0;
}
.motto span{
  font-size:clamp(20px,2.2vw,24px);
}
.academy-card--image{
  max-width:min(440px,100%);
}
.academy-card--image .academy-preview{
  aspect-ratio:1/1;
}

/* CTA, FAQ e Contactos */
.cta-band{
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  background-position:center;
}
.cta-band h2{
  font-size:clamp(36px,5.2vw,68px);
}
.faq-grid{
  max-width:var(--content-max);
  gap:20px;
}
.faq-item{padding:28px 26px}
.contact-grid{
  max-width:var(--content-max);
  gap:clamp(34px,5vw,64px);
  align-items:center;
}
.contact-info p{
  margin-bottom:22px;
}
.contact-line{
  padding:12px 0;
}
form{
  padding:clamp(24px,3vw,34px);
}
.field{
  margin-bottom:16px;
}
.field input,
.field textarea,
.field select{
  padding:13px 14px;
}
.field textarea{
  min-height:104px;
}

/* Animações menos invasivas e melhor performance */
/* NOTA: `will-change:transform,opacity` em `.reveal, .stagger > *` promovia 49
   elementos a camadas de composição DE FORMA PERMANENTE (não só durante a
   animação), o que é o oposto do que a propriedade serve. Removido: a promoção
   passa a ser feita pelo browser só enquanto a transição corre. */

/* NOTA: `content-visibility:auto` com `contain-intrinsic-size:900px` fazia o
   browser estimar 900px para secções que medem 1030px. Eram 6 secções × 130px
   = 780px de erro de altura, corrigidos à medida que cada uma entrava no ecrã —
   e cada correcção deslocava a barra de scroll. Removido: 11 secções não
   justificam o render-skipping, e era esta a causa dos saltos. */

/* Tablet */
@media(max-width:1180px){
  :root{
    --space-section:clamp(52px,7vh,82px);
  }
  .fronts-grid{grid-template-columns:repeat(2,1fr)}
  .product-lines{grid-template-columns:1fr}
  .line-heading{min-height:auto}
  .product-line .product-grid{grid-template-columns:repeat(3,1fr)}
  .academy-card--image{max-width:520px;margin-inline:auto}
}

/* Mobile */
@media(max-width:760px){
  html{
    scroll-snap-type:none;
  }
  section:not(.hero){
    min-height:auto;
    padding-top:64px;
    padding-bottom:64px;
  }
  .hero{
    min-height:100svh;
  }
  .hero-actions{
    flex-direction:column;
  }
  .hero-actions .btn{
    width:100%;
  }
  .fronts-grid,
  .cards,
  .dna,
  .consult-list,
  .faq-grid{
    grid-template-columns:1fr;
  }
  .front-card,
  .card,
  .dna-item,
  .consult-item,
  .faq-item{
    padding:24px 22px;
  }
  .dna-visual{
    aspect-ratio:1/1;
  }
  .product-line .product-grid{
    grid-template-columns:1fr;
  }
  .product{
    min-height:auto;
    padding:24px 18px;
  }
  .academy-card--image{
    max-width:100%;
  }
  .contact-grid{
    align-items:start;
  }
}



/* ==========================================================
   Produtos Rosa Azul — secções separadas com carrossel em cards
   3 produtos visíveis no desktop, rotação automática a cada 5s.
   Inspirado na lógica de grupos do carrossel de produtos Voryx.
   ========================================================== */
.products-showcase{
  overflow-x:hidden;
  min-height:calc(100svh - var(--header-h));
  display:flex;
  align-items:center;
  background:var(--ivory);
  padding-block:clamp(58px,7.4vh,92px);
}
.products-showcase--professional{
  background:var(--linen);
}
.product-section-inner{
  width:min(100%,var(--maxw));
  max-width:var(--maxw);
  margin-inline:auto;
}
.products-showcase .section-head{
  max-width:840px;
  margin:0 auto clamp(24px,3.4vh,38px);
}
.products-showcase .section-head h2{
  font-size:clamp(31px,3.25vw,46px);
  margin:14px 0 12px;
}
.products-showcase .section-head p{
  font-size:clamp(15px,1.12vw,16.5px);
  line-height:1.58;
  color:var(--graphite);
}
/* Estado da gama: assinala que a linha ainda está em preparação.
   Reaproveita a linguagem do `.academy-status` (pílula dourada + losango) para
   ler como parte da interface e não como aviso colado por cima. Fica entre o
   h2 e o parágrafo, centrado pelo `text-align` do `.section-head`. */
.section-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  max-width:100%;
  margin:2px auto clamp(14px,1.7vh,20px);
  padding:8px 18px;
  border:1px solid var(--gold-soft);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(185,147,85,.12),rgba(185,147,85,.05));
  color:var(--gold);
  font-family:var(--font-sans);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.35;
  text-align:center;
  text-wrap:balance;
}
/* `flex:0 0 auto` para o losango não achatar quando o rótulo passa a 2 linhas. */
.section-status::before{
  content:"";
  flex:0 0 auto;
  width:7px;
  height:7px;
  background:var(--gold);
  transform:rotate(45deg);
}
.ra-products-slider{
  width:100%;
  min-width:0;
}
.ra-products-viewport{
  overflow:hidden;
  border-radius:var(--radius-card);
}
.ra-products-track{
  --product-gap:clamp(18px,2vw,26px);
  display:flex;
  gap:var(--product-gap);
  align-items:stretch;
  transition:transform .58s cubic-bezier(.22,.8,.24,1);
  will-change:transform;
}
.ra-product-card{
  flex:0 0 calc((100% - (var(--product-gap) + var(--product-gap))) / 3);
  min-width:0;
  display:flex;
  flex-direction:column;
  background:rgba(255,253,248,.86);
  border:1px solid rgba(207,200,190,.68);
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:0 16px 42px rgba(23,58,99,.045);
  transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease;
}
.ra-product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 54px rgba(23,58,99,.08);
  border-color:rgba(185,147,85,.56);
}
.ra-product-card__media{
  aspect-ratio:1.18/1;
  overflow:hidden;
  background:var(--linen);
  border-bottom:1px solid rgba(185,147,85,.22);
}
.ra-product-card__media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transform:scale(1.01);
}
.ra-product-card__body{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:clamp(20px,2.1vw,26px);
}
.ra-product-card__kicker{
  display:inline-flex;
  margin-bottom:8px;
  font-family:var(--font-sans);
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:700;
}
.ra-product-card h3{
  font-size:clamp(23px,2.05vw,31px);
  line-height:1.04;
  margin:0 0 10px;
  color:var(--deep-blue);
}
.ra-product-card p{
  font-size:14.25px;
  line-height:1.52;
  color:var(--graphite);
  margin:0;
}
.ra-product-card__tags{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:18px 0 0;
  padding:0;
}
.ra-product-card__tags li{
  font-family:var(--font-sans);
  font-size:9.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--deep-blue);
  border:1px solid rgba(185,147,85,.34);
  background:rgba(255,253,248,.8);
  border-radius:999px;
  padding:7px 9px;
  line-height:1.05;
}
.ra-products-controls{
  display:grid;
  grid-template-columns:minmax(90px,auto) minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(12px,2vw,22px);
  margin-top:clamp(18px,2.4vh,26px);
}
.ra-products-meta{
  font-family:var(--font-sans);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(74,72,67,.62);
  white-space:nowrap;
}
.ra-products-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  min-width:0;
}
.ra-products-dot{
  width:8px;
  height:8px;
  border:0;
  border-radius:999px;
  padding:0;
  background:rgba(185,147,85,.35);
  cursor:pointer;
  transition:width .25s ease,background .25s ease,transform .25s ease;
}
.ra-products-dot:hover{
  transform:scale(1.18);
  background:rgba(185,147,85,.72);
}
.ra-products-dot.active{
  width:28px;
  background:var(--gold);
  transform:none;
}
.ra-products-arrows{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}
.ra-products-btn{
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(185,147,85,.44);
  background:var(--linen);
  color:var(--deep-blue);
  font-family:var(--font-serif);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  display:inline-grid;
  place-items:center;
  transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.ra-products-btn:hover{
  transform:translateY(-1px);
  background:#fffaf0;
  border-color:var(--gold);
  box-shadow:0 10px 28px rgba(23,58,99,.08);
}
.products-showcase .products-note{
  text-align:center;
  margin-top:clamp(24px,3vh,36px);
  font-style:italic;
  font-family:var(--font-serif);
  font-size:clamp(20px,1.8vw,24px);
  color:var(--deep-blue);
}

/* Tablet: 2 cards visíveis para preservar legibilidade sem quebrar a largura. */
@media(max-width:980px){
  .products-showcase{
    min-height:auto;
    padding-block:clamp(64px,8vh,96px);
  }
  .ra-product-card{
    flex-basis:calc((100% - var(--product-gap)) / 2);
  }
}

/* Telemóvel: 1 card por vez, mantendo a mesma estrutura de carrossel. */
@media(max-width:640px){
  .products-showcase .section-head{
    margin-bottom:24px;
  }
  /* Rótulo mais compacto para caber numa linha em ecrãs de 360px. */
  .section-status{
    gap:8px;
    margin-bottom:14px;
    padding:6px 14px;
    font-size:10px;
    letter-spacing:.12em;
  }
  .section-status::before{
    width:6px;
    height:6px;
  }
  .ra-products-track{
    gap:16px;
  }
  .ra-product-card{
    flex-basis:100%;
  }
  .ra-product-card__media{
    aspect-ratio:1/1;
  }
  .ra-product-card__body{
    padding:22px 20px;
  }
  .ra-products-controls{
    grid-template-columns:1fr;
    justify-items:center;
    gap:14px;
  }
  .ra-products-meta{
    order:3;
  }
  .ra-products-arrows{
    order:2;
  }
  .ra-products-dots{
    order:1;
  }
}

@media(prefers-reduced-motion:reduce){
  .ra-products-track{
    transition:none;
  }
}



  /* ---------- ajustes finos solicitados ---------- */
  .section-head--wide{max-width:1180px}
  .section-head--wide p{max-width:1040px;margin-left:auto;margin-right:auto}
  @media (min-width:1101px){
    .section-head--singleline h2,
    .section-head--singleline p{white-space:nowrap}
  }
  @media (max-width:1100px){
    .section-head--singleline h2,
    .section-head--singleline p{white-space:normal}
  }

  /* padronização dos subtítulos entre linhas douradas */
  .about-text .eyebrow,
  .consult-text .eyebrow,
  .academy-text .eyebrow,
  .contact-info .eyebrow{
    justify-content:center;
    width:fit-content;
    margin:0 auto 14px;
  }
  .about-text .eyebrow::before,
  .consult-text .eyebrow::before,
  .academy-text .eyebrow::before,
  .contact-info .eyebrow::before{
    content:"";
    width:38px;
    height:1px;
    background:var(--gold-soft);
  }

  /* garantir melhor leitura do bloco de serviços no desktop */
  #servicos .section-head h2{max-width:none}
  #servicos .section-head p{max-width:none}


  /* ---------- ajustes finais de alinhamento ---------- */
  /* Rodapé: copyright e DNA operacional alinhados em coluna, ao centro */
  .footer-bottom{
    justify-content:center;
    align-items:center;
    flex-direction:column;
    text-align:center;
    gap:6px;
  }
  .footer-bottom span,
  .footer-bottom .dna{
    display:block;
    width:100%;
  }
  .footer-bottom .dna{
    letter-spacing:.055em;
    color:rgba(255,253,248,.74);
  }

  /* Método Rosa Azul: traços laterais em azul, coerentes com o fundo profundo */
  .method .eyebrow::before,
  .method .eyebrow::after{
    background:var(--light-blue) !important;
  }

  /* Kicker de secção: centraliza os rótulos que estavam presos à coluna */
  .section-kicker{
    max-width:100%;
    margin:0 auto clamp(22px,3vw,34px);
    text-align:center;
  }
  .section-kicker .eyebrow{
    margin:0 auto;
  }
  .consulting .section-kicker + .consult-grid,
  .contact .section-kicker + .contact-grid{
    margin-top:0;
  }

/* ==========================================================
   MOBILE HARDENING — Rosa Azul
   Escopo: apenas <= 760px / <= 480px para não interferir no desktop.
   Objectivo: reduzir quebras, evitar overflow horizontal, compactar secções
   e preservar a estética premium no telemóvel.
   ========================================================== */
@media (max-width:760px){
  :root{
    --pad:20px;
    --header-h:74px;
    --space-section:54px;
    --space-head:28px;
    --space-block:22px;
  }

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    scroll-snap-type:none !important;
  }

  body{
    font-size:15px;
    line-height:1.58;
  }

  section,
  section:not(.hero){
    width:100%;
    max-width:100%;
    padding-inline:var(--pad);
    scroll-snap-align:none !important;
    scroll-snap-stop:normal !important;
    content-visibility:visible;
    contain-intrinsic-size:auto;
  }

  section:not(.hero){
    min-height:auto;
    padding-top:var(--space-section);
    padding-bottom:var(--space-section);
    display:block;
  }

  /* Header e menu mobile */
  header,
  header.scrolled{
    height:var(--header-h);
    padding-inline:var(--pad);
    background:rgba(255,253,248,.96);
    backdrop-filter:blur(12px);
    box-shadow:0 1px 0 rgba(207,200,190,.42);
  }

  .nav-inner{
    gap:12px;
  }

  .brand img,
  header.scrolled .brand img{
    height:46px;
    max-width:160px;
  }

  .menu-toggle{
    display:flex;
    margin-left:auto;
    padding:10px 0 10px 12px;
  }

  .mobile-menu{
    padding:calc(var(--header-h) + 22px) 24px 34px;
    justify-content:flex-start;
    align-items:stretch;
    gap:6px;
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  .mobile-menu a{
    display:block;
    width:100%;
    padding:10px 8px;
    text-align:center;
    font-size:clamp(23px,7vw,28px);
    line-height:1.04;
  }

  .mobile-menu .header-cta{
    width:100%;
    max-width:320px;
    margin:22px auto 0;
    justify-content:center;
    height:52px;
    font-family:var(--font-sans);
    font-size:11px;
    letter-spacing:.12em;
  }

  .mobile-close{
    top:22px;
    right:22px;
  }

  /* Tipografia mobile: menos quebras e melhor ritmo */
  .eyebrow{
    max-width:100%;
    justify-content:center;
    gap:10px;
    font-size:10px;
    letter-spacing:.155em;
    line-height:1.28;
    text-align:center;
    white-space:normal;
  }

  .eyebrow::before,
  .eyebrow::after{
    width:24px !important;
    flex:0 0 24px;
  }

  .section-head,
  .section-kicker{
    width:100%;
    max-width:100%;
    margin-bottom:var(--space-head);
    text-align:center;
  }

  .section-head h2,
  .about-text h2,
  .consult-text h2,
  .academy-text h2,
  .contact-info h2,
  .cta-band h2{
    font-size:clamp(30px,9.4vw,38px);
    line-height:1.04;
    letter-spacing:-.01em;
    margin:14px auto 12px;
    max-width:100%;
  }

  .section-head p,
  .about-text p,
  .consult-text p,
  .academy-text p,
  .contact-info p{
    max-width:100%;
    font-size:15px;
    line-height:1.62;
    margin-left:auto;
    margin-right:auto;
  }

  /* Hero */
  .hero{
    min-height:auto;
    padding-top:var(--header-h);
  }

  .hero-bg{
    background-position:center top;
  }

  .hero-overlay{
    background:
      linear-gradient(180deg,
        rgba(255,253,248,.98) 0%,
        rgba(255,253,248,.92) 42%,
        rgba(255,253,248,.70) 70%,
        rgba(255,253,248,.40) 100%);
  }

  .hero-inner{
    padding:38px var(--pad) 46px;
  }

  .hero-content{
    width:100%;
    max-width:100%;
  }

  .hero h1{
    max-width:100%;
    font-size:clamp(34px,11.2vw,46px);
    line-height:.99;
    margin:20px 0 16px;
    letter-spacing:-.025em;
  }

  .lead{
    max-width:100%;
    font-size:15.5px;
    line-height:1.62;
    margin-bottom:28px;
  }

  .hero-actions{
    flex-direction:column;
    gap:12px;
    width:100%;
  }

  .btn,
  .hero-actions .btn,
  form .btn{
    width:100%;
    min-width:0;
    height:52px;
    padding:0 18px;
    justify-content:center;
    text-align:center;
    font-size:11px;
    line-height:1.16;
    letter-spacing:.12em;
    white-space:normal;
  }

  /* Barra de valor abaixo do hero */
  .value-bar{
    grid-template-columns:1fr;
    margin:0 var(--pad);
    transform:translateY(-18px);
    border-radius:var(--radius-card);
  }

  .value-item{
    padding:18px 20px;
  }

  .value-item span{
    font-size:10px;
    letter-spacing:.16em;
  }

  .value-item strong{
    font-size:16px;
    line-height:1.2;
  }

  /* Grids e cards */
  .about-grid,
  .consult-grid,
  .academy-grid,
  .contact-grid{
    grid-template-columns:1fr !important;
    gap:28px;
    width:100%;
    max-width:100%;
  }

  .about-text,
  .consult-text,
  .academy-text,
  .contact-info{
    text-align:center;
  }

  .about-text .eyebrow,
  .consult-text .eyebrow,
  .academy-text .eyebrow,
  .contact-info .eyebrow{
    margin-inline:auto;
  }

  .pillars,
  .fronts-grid,
  .cards,
  .dna,
  .consult-list,
  .faq-grid{
    grid-template-columns:1fr !important;
    gap:16px;
    width:100%;
    max-width:100%;
  }

  .pillar,
  .front-card,
  .card,
  .dna-item,
  .consult-item,
  .faq-item{
    padding:22px 20px;
    border-radius:var(--radius-card);
  }

  .pillar h3,
  .front-card h3,
  .card h3,
  .consult-item h3,
  .faq-item h3{
    font-size:clamp(22px,6.4vw,27px);
    line-height:1.08;
  }

  .card p,
  .front-card p,
  .pillar p,
  .consult-item p,
  .faq-item p{
    font-size:14.5px;
    line-height:1.55;
  }

  .card .icon{
    width:44px;
    height:44px;
    margin-bottom:16px;
  }

  /* Método: imagens menos altas no telemóvel */
  .method{
    padding-inline:var(--pad);
  }

  .method .section-head p{
    font-size:14.5px;
  }

  .dna{
    margin-inline:0;
  }

  .dna-item{
    padding:14px 14px 22px;
  }

  .dna-visual{
    aspect-ratio:4/3;
    margin-bottom:14px;
  }

  .dna-item .mark{
    margin:0 0 10px;
    font-size:12px;
  }

  .dna-item p{
    font-size:14.5px;
    line-height:1.55;
  }

  /* Consultoria */
  .consult-text .btn,
  .academy-text .btn{
    margin-top:8px;
  }

  .consult-list{
    text-align:left;
  }

  /* Produtos: 1 card por slide, sem corte lateral nem quebras excessivas */
  .products-showcase{
    min-height:auto !important;
    padding:54px var(--pad) !important;
    display:block;
  }

  .product-section-inner{
    width:100%;
    max-width:100%;
  }

  .products-showcase .section-head{
    max-width:100%;
    margin-bottom:22px;
  }

  .products-showcase .section-head h2{
    font-size:clamp(29px,8.8vw,36px);
    line-height:1.06;
    margin:12px 0 10px;
  }

  .products-showcase .section-head p{
    font-size:14.5px;
    line-height:1.55;
  }

  .ra-products-viewport{
    width:100%;
    max-width:100%;
    border-radius:var(--radius-card);
  }

  .ra-products-track{
    --product-gap:0px;
    gap:0;
  }

  .ra-product-card{
    flex:0 0 100% !important;
    max-width:100%;
    min-width:100%;
    border-radius:var(--radius-card);
  }

  .ra-product-card:hover{
    transform:none;
  }

  .ra-product-card__media{
    aspect-ratio:4/3 !important;
  }

  .ra-product-card__body{
    padding:18px 18px 20px;
  }

  .ra-product-card__kicker{
    font-size:9px;
    letter-spacing:.14em;
    margin-bottom:7px;
  }

  .ra-product-card h3{
    font-size:clamp(25px,7.6vw,31px);
    line-height:1.02;
    margin-bottom:8px;
  }

  .ra-product-card p{
    font-size:14px;
    line-height:1.5;
  }

  .ra-product-card__tags{
    gap:6px;
    margin-top:14px;
  }

  .ra-product-card__tags li{
    font-size:8.4px;
    letter-spacing:.08em;
    padding:6px 8px;
  }

  .ra-products-controls{
    grid-template-columns:1fr;
    justify-items:center;
    gap:12px;
    margin-top:16px;
  }

  .ra-products-dots{
    max-width:100%;
    flex-wrap:wrap;
    gap:7px;
  }

  .ra-products-dot{
    width:7px;
    height:7px;
  }

  .ra-products-dot.active{
    width:24px;
  }

  .ra-products-arrows{
    justify-content:center;
  }

  .ra-products-btn{
    width:40px;
    height:40px;
  }

  .ra-products-meta{
    font-size:10px;
    letter-spacing:.12em;
  }

  .products-showcase .products-note{
    font-size:19px;
    line-height:1.3;
    margin-top:24px;
  }

  /* Academy */
  .academy-status{
    margin:2px auto 14px;
    font-size:10px;
    letter-spacing:.13em;
    padding:7px 12px;
  }

  .academy-card{
    padding:18px;
  }

  .academy-preview{
    aspect-ratio:1/1;
    object-fit:cover;
  }

  /* CTA band */
  .cta-band{
    min-height:auto !important;
    padding-top:70px !important;
    padding-bottom:70px !important;
    background-size:cover;
    background-position:center;
  }

  .cta-band p{
    max-width:100%;
    font-size:15px;
    line-height:1.62;
  }

  /* Contactos e formulário */
  .contact-info p{
    margin-bottom:22px;
  }

  .contact-line{
    justify-content:flex-start;
    text-align:left;
    gap:12px;
    padding:11px 0;
  }

  .contact-line span{
    font-size:14.5px;
    overflow-wrap:anywhere;
  }

  form{
    width:100%;
    padding:22px 18px;
  }

  .field{
    margin-bottom:14px;
  }

  .field label{
    font-size:10.5px;
    letter-spacing:.12em;
    margin-bottom:7px;
  }

  .field input,
  .field textarea,
  .field select{
    min-height:46px;
    padding:12px 13px;
    font-size:16px;
  }

  .field textarea{
    min-height:104px;
  }

  /* Footer */
  footer{
    padding:54px var(--pad) 0;
  }

  .footer-top{
    gap:28px;
    padding-bottom:34px;
    text-align:center;
  }

  .footer-brand img{
    height:58px;
    margin-left:auto;
    margin-right:auto;
  }

  .footer-brand p{
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
  }

  .footer-col h5{
    margin-bottom:10px;
  }

  .footer-col a{
    padding:5px 0;
  }

  .footer-bottom{
    padding:22px 0;
    line-height:1.45;
  }
}

@media (max-width:480px){
  :root{
    --pad:18px;
    --header-h:70px;
  }

  .brand img,
  header.scrolled .brand img{
    height:42px;
    max-width:146px;
  }

  .hero-inner{
    padding-top:34px;
    padding-bottom:42px;
  }

  .hero h1{
    font-size:clamp(32px,11vw,40px);
  }

  .section-head h2,
  .about-text h2,
  .consult-text h2,
  .academy-text h2,
  .contact-info h2,
  .cta-band h2{
    font-size:clamp(29px,9.6vw,35px);
  }

  .eyebrow{
    font-size:9.5px;
    letter-spacing:.13em;
    gap:8px;
  }

  .eyebrow::before,
  .eyebrow::after{
    width:18px !important;
    flex-basis:18px;
  }

  .front-card,
  .card,
  .pillar,
  .consult-item,
  .faq-item{
    padding:20px 18px;
  }

  .dna-item{
    padding:12px 12px 20px;
  }

  .dna-visual{
    aspect-ratio:1.08/1;
  }

  .ra-product-card__media{
    aspect-ratio:1.08/1 !important;
  }

  .ra-product-card__body{
    padding:17px 16px 19px;
  }

  .mobile-menu a{
    font-size:clamp(22px,7.2vw,27px);
  }

  .footer-bottom .dna{
    letter-spacing:.025em;
  }
}

/* ==========================================================
   MOBILE REFINO — botões pill/glass, value-bar e cards centrados
   Escopo: <=760px apenas. Nenhuma regra sai deste media query,
   por isso o layout desktop (>=1024px) fica intacto.
   ========================================================== */
@media (max-width:760px){
  :root{
    --glass-blur:blur(14px) saturate(140%);
    --glass-tint-dark:rgba(23,58,99,.78);   /* --deep-blue @78% — 6:1 com --linen */
    --glass-tint-light:rgba(255,253,248,.68);
    --glass-shadow:0 10px 24px rgba(23,58,99,.16);
    --radius-pill:9999px;
  }

  /* ---------- 1. BOTÕES ---------- */
  /* Correcção de raiz: `.hero-actions .btn{flex:1}` resolvia flex-basis:0
     no eixo vertical (coluna) e esmagava os botões para ~15px de altura,
     anulando o `height:52px`. `flex:0 0 auto` devolve-lhes a altura real. */
  .btn,
  .hero-actions .btn,
  form .btn{
    flex:0 0 auto;
    width:fit-content;
    max-width:100%;
    min-width:44px;              /* alvo de toque mínimo */
    height:auto;
    min-height:52px;             /* >= 44px (WCAG 2.5.8) */
    padding:16px 28px;           /* altura vem do padding, não de height fixo */
    border-radius:var(--radius-pill);
    border:1px solid var(--gold-soft);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    box-shadow:var(--glass-shadow);
  }

  .btn--primary{
    background:var(--glass-tint-dark);
    color:var(--linen);
  }

  .btn--secondary{
    background:var(--glass-tint-light);
    color:var(--nav-ink);
  }

  /* Coluna: sem esta linha o `align-items:stretch` implícito voltaria
     a esticar os botões a 100% e o fit-content não teria efeito. */
  .hero-actions{
    align-items:flex-start;      /* acompanha o texto do hero, alinhado à esquerda */
  }

  .consult-text .btn,
  .academy-text .btn,
  .cta-band .btn,
  form .btn{
    margin-inline:auto;          /* estas secções são centradas no mobile */
  }

  /* ---------- 2. VALUE BAR: 4 cards iguais e centrados ---------- */
  /* `repeat(4,1fr)` iguala a altura das 4 linhas pelo card mais alto e a
     largura por coluna única; a 5.ª linha (`auto`) é o ornamento, que fica
     de fora da equalização para não herdar a altura de um card. */
  .value-bar{
    grid-template-columns:1fr;
    grid-template-rows:repeat(4,1fr) auto;
    transform:none;              /* ver nota 3 */
    margin:0 var(--pad);
  }

  .value-item{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:12px;
    padding:var(--space-block) var(--pad);
  }

  .value-item h4{
    margin-bottom:4px;
  }

  .value-item p{
    max-width:34ch;
  }

  /* `:last-child` do CSS original nunca acerta no 4.º card (o último filho
     é o ornamento), por isso a borda ficava pendurada. */
  .value-item:nth-child(4){
    border-bottom:none;
  }

  /* ---------- 3. ORNAMENTO: de volta ao fluxo normal ---------- */
  /* Era `position:absolute; bottom:-7px; left:50%` com `background:var(--linen)`
     — daí o rectângulo branco a flutuar. Em fluxo normal ocupa a última linha
     da grelha, centrado, com espaçamento simétrico acima e abaixo. */
  .value-bar-orn{
    position:static;
    transform:none;              /* anula o translateX(-50%) do absolute */
    background:transparent;
    justify-self:center;
    display:flex;
    align-items:center;
    justify-content:center;
    /* Espacamento simetrico medido entre fronteiras estruturais: --space-block
       acima (fim do 4.o card) e --space-block abaixo (borda inferior da barra).
       Nao depende do comprimento do texto de nenhum card. */
    padding:var(--space-block) 0;
    margin:0;
  }

  /* ---------- 4. SERVIÇOS: conteúdo dos cards centrado ---------- */
  #servicos .card{
    align-items:center;
    text-align:center;
  }
}

/* ==========================================================
   AUDITORIA DE RESPONSIVIDADE — correcções
   Medições feitas no browser em 9 larguras (390 → 1440).
   Escopo: nada aqui altera o desktop >= 1024px, excepto o
   endurecimento do logótipo (que só evita deformação).
   ========================================================== */

/* ---------- 1. LOGÓTIPO: rácio preservado em qualquer contexto ----------
   Rede de segurança global. Se alguma vez uma restrição de largura voltar a
   aplicar-se, `object-fit:contain` degrada para letterbox (rácio intacto)
   em vez de esmagar a imagem. */
.brand img,
header.scrolled .brand img{
  width:auto;
  max-width:none;
  object-fit:contain;
}
.footer-brand img{
  width:auto;
  object-fit:contain;
}

/* ---------- 1.1 FAIXA 1024–1200px: folga no header ----------
   Medido a 1024px: o header precisava de exactamente 1009px para 1009px
   disponíveis — zero margem. Um render de fonte ligeiramente mais largo ou
   uma barra de scroll diferente reabriria o esmagamento. Compacta o
   suficiente para ~70px de folga, sem alterar a leitura. */
@media (min-width:1024px) and (max-width:1200px){
  .brand img{height:54px}
  header.scrolled .brand img{height:46px}
  nav.main{gap:clamp(10px,1.1vw,18px)}
  nav.main a{font-size:13.5px}
  .header-cta{padding:0 18px;font-size:12.5px}
}

/* ---------- 2. FAIXA 761–1023px: header passa a menu mobile ----------
   O nav desktop (491px) + CTA (207px) deixavam de caber a partir dos ~1000px
   e esmagavam o .brand até 0px (iPad vertical 768/820/834; janela a metade
   em ecrãs 1600→800 e 1920→960). Abaixo de 760px mantém-se intocado o bloco
   mobile já existente — por isso este bloco começa em 760.01px. */
@media (min-width:760.01px) and (max-width:1023.98px){
  :root{
    --header-h:88px;
  }

  header,
  header.scrolled{
    height:var(--header-h);
  }

  nav.main,
  .nav-inner > .header-cta{
    display:none;
  }

  .menu-toggle{
    display:flex;
    margin-left:auto;
  }

  .snap-nav{
    display:none;
  }

  .brand img,
  header.scrolled .brand img{
    height:54px;
  }

  .mobile-menu{
    display:flex;
    position:fixed;inset:0;z-index:99;
    background:var(--linen);
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:6px;
    padding:calc(var(--header-h) + 28px) 32px 44px;
    overflow-y:auto;
    overscroll-behavior:contain;
    transform:translateY(-100%);
    transition:transform .4s ease;
  }
  .mobile-menu.open{
    transform:none;
  }
  .mobile-menu a{
    display:block;
    width:100%;
    padding:12px 8px;
    text-align:center;
    font-family:var(--font-serif);
    font-size:clamp(26px,3.6vw,34px);
    line-height:1.06;
    color:var(--deep-blue);
  }
  .mobile-menu .header-cta{
    display:inline-flex;
    width:100%;
    max-width:340px;
    margin:26px auto 0;
    justify-content:center;
    height:54px;
  }
  .mobile-close{
    position:absolute;top:26px;right:26px;
    background:none;border:none;
    font-size:38px;line-height:1;
    color:var(--deep-blue);cursor:pointer;
  }

  /* ---------- 2.1 Centralização em tablet ----------
     Os grids já colapsavam para 1 coluna aos 1100px, mas o texto continuava
     alinhado à esquerda com intenção de 2 colunas. */
  .about-text,
  .consult-text,
  .academy-text,
  .contact-info{
    text-align:center;
  }
  .about-text p,
  .consult-text p,
  .academy-text p,
  .contact-info p{
    margin-inline:auto;
  }
  .about-text .eyebrow,
  .consult-text .eyebrow,
  .academy-text .eyebrow,
  .contact-info .eyebrow{
    margin-inline:auto;
  }
  /* `display:table` (e não inline-block) para o motto continuar a ser
     block-level: encolhe à largura do conteúdo e centra-se com margin auto,
     mas mantém o botão na linha seguinte em vez de o puxar para o lado. */
  .motto{
    display:table;
    margin-inline:auto;
    text-align:left;
  }
}

/* ---------- 2.2 HERO centrado em tablet e mobile ----------
   Anula o `.hero-actions{align-items:flex-start}` do bloco mobile.
   O `.hero .eyebrow` não tem a classe `.center`, por isso só desenhava o
   traço à direita — aqui ganha o par simétrico. */
@media (max-width:1023.98px){
  .hero-content{
    text-align:center;
    margin-inline:auto;
  }
  .hero .eyebrow{
    justify-content:center;
    margin-inline:auto;
  }
  .hero .eyebrow::before{
    content:"";
    width:38px;
    height:1px;
    background:var(--gold-soft);
  }
  .hero h1,
  .hero p.lead{
    margin-inline:auto;
  }
  .hero-actions{
    justify-content:center;
    align-items:center;
  }

  /* ---------- 3. Coerência dos cards ----------
     `#servicos .card` já estava centrado; consultoria/FAQ/pilares/frentes
     continuavam à esquerda. Uniformiza o conjunto com os section-heads.
     Para reverter, basta apagar este bloco. */
  .pillar,
  .front-card,
  .card,
  .dna-item,
  .consult-item,
  .faq-item{
    align-items:center;
    text-align:center;
  }
  .consult-list{
    text-align:center;
  }
}

/* ==========================================================
   HEADER SEM BARRA + HAMBÚRGUER FLUTUANTE (< 1024px)
   A barra desaparece por completo; fica apenas o hambúrguer a
   flutuar sobre o conteúdo, na posição exacta que já ocupava.
   ========================================================== */
@media (max-width:1023.98px){
  /* Sem fundo, sem blur, sem sombra — em qualquer estado de scroll.
     `pointer-events:none` é essencial: sem isso a faixa fixa continuava
     a intercetar toques sobre o conteúdo que passa por baixo. */
  header,
  header.scrolled{
    background:transparent;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    box-shadow:none;
    pointer-events:none;
  }

  /* O logótipo sai do header e passa para o topo do hero. */
  .brand{
    display:none;
  }

  /* Posição inalterada (continua a ser o último item flex, encostado
     ao --pad da direita) — apenas volta a ser clicável. */
  .menu-toggle{
    pointer-events:auto;
    margin-left:auto;
  }

  /* Sem barra por trás, as três linhas azuis desapareciam sobre as
     secções de fundo escuro (Método, CTA e rodapé são azul profundo).
     A classe é aplicada por JS conforme o que está atrás do ícone. */
  .menu-toggle.on-dark span{
    background:var(--linen);
  }

  /* Com o menu aberto já existe um X dedicado — evita dois controlos
     sobrepostos, já que o header (z-index 100) fica acima do menu (99). */
  body.menu-open .menu-toggle{
    opacity:0;
    pointer-events:none;
  }
}

/* ---------- Logótipo vertical no topo do hero ----------
   Assume o lugar do logótipo do header, que foi removido abaixo dos
   1024px. Existe apenas nessa faixa; no desktop a marca continua a
   viver no header. */
.hero-logo{
  display:none;
}
@media (max-width:1023.98px){
  .hero-logo{
    display:block;
    width:clamp(118px,34vw,168px);
    height:auto;
    margin:0 auto clamp(18px,4vw,26px);
  }

  /* Sem barra de header, o topo do hero já não precisa de reservar
     espaço para ela. Recupera-se essa folga para o logótipo não empurrar
     o 2.º botão para fora da primeira dobra. O hambúrguer ocupa até
     y≈53, pelo que o logótipo continua com folga suficiente. */
  .hero-inner{
    padding-top:12px;
  }
}

/* Ecrãs baixos (iPhone SE e afins): o logótipo encolhe para não agravar
   a altura do hero, que nestes formatos já é maior do que a dobra. */
@media (max-width:1023.98px) and (max-height:720px){
  .hero-logo{
    width:clamp(96px,26vw,124px);
    margin-bottom:14px;
  }
}

/* ==========================================================
   AJUSTES FINOS
   1. logótipo +30% · 1.1 overlay mais opaco · 2. respiro da
   value-bar · 3. fundo dos pilares · 4. botão do formulário
   ========================================================== */

/* ---------- 1. Logótipo do hero: +30% ----------
   Cada valor do clamp anterior multiplicado por 1.3. A margem inferior
   encolhe um pouco para o acréscimo de altura não empurrar tanto os CTAs. */
@media (max-width:1023.98px){
  .hero-logo{
    width:clamp(153px,44vw,218px);
    margin-bottom:clamp(14px,3vw,20px);
  }
}
@media (max-width:1023.98px) and (max-height:720px){
  .hero-logo{
    width:clamp(125px,34vw,161px);
    margin-bottom:12px;
  }
}

/* O logótipo 30% maior acrescenta ~45px de altura e voltava a empurrar o 2.º
   CTA para fora da dobra (medido: 26px a 390x844). Recupera-se esse espaço
   apertando ligeiramente o ritmo vertical do hero, sem mexer nos tamanhos
   de letra. Para repor o espaçamento anterior, apagar este bloco. */
@media (max-width:1023.98px){
  .hero h1{
    margin-top:14px;
    margin-bottom:12px;
  }
  .hero .lead{
    margin-bottom:14px;
  }
  .hero-logo{
    margin-bottom:10px;
  }
  .hero-inner{
    padding-top:4px;
  }
  .hero-actions{
    gap:8px;
  }
}

/* ---------- 1.1 Overlay do hero mais opaco ----------
   A imagem de fundo atravessava o texto e tirava-lhe legibilidade.
   Sobe a opacidade do véu, mantendo a fotografia visível no rodapé
   da secção para não perder profundidade. */
@media (max-width:1023.98px){
  .hero-overlay{
    background:linear-gradient(180deg,
      rgba(255,253,248,.995) 0%,
      rgba(255,253,248,.97) 46%,
      rgba(255,253,248,.88) 74%,
      rgba(255,253,248,.66) 100%);
  }
}

/* ---------- 2. Respiro entre o hero e a value-bar ----------
   No desktop a barra subia 90px para dentro do hero (margin-top:-90px) e
   no mobile encostava a 0px. Passa a ficar sempre abaixo da imagem, com
   folga. Para repor a sobreposição original, voltar a -90px aqui. */
.value-bar{
  margin-top:clamp(30px,4.5vh,58px);
}
@media (max-width:1023.98px){
  .value-bar{
    margin-top:clamp(24px,4vw,34px);
    transform:none;
  }
}

/* ---------- 2b. O mesmo respiro EM BAIXO, no telemóvel ----------
   O desktop (>=1024px) e o tablet (761–1023.98px) já fecham este par; o mobile
   não, porque o `margin:0 var(--pad)` do bloco "MOBILE REFINO" zera o
   margin-bottom e nada depois o repõe nesta faixa — a borda dourada dos cards
   ficava encostada a "A Empresa", sem folga nenhuma.
   Aqui o ornamento vive DENTRO da barra (`position:static`, ver "MOBILE
   REFINO" ponto 3), por isso não é preciso o valor grande do tablet: basta
   repetir o `margin-top` acima para o respiro ficar simétrico dos dois lados,
   que é a mesma regra do desktop.
   Escopo <=760px de propósito — em 761–1023.98px pisaria o clamp(64px,9vw,96px)
   do tablet, que é maior por causa do ornamento flutuante. */
@media (max-width:760px){
  .value-bar{
    margin-bottom:clamp(24px,4vw,34px);
  }
}

/* ---------- 3. Fundo por trás dos pilares ----------
   `.pillars` usa `background:var(--sand)` + `gap` para desenhar as linhas
   divisórias. No desktop o gap é 2px (fica um fio); no mobile passa a 16px,
   e essa areia aparecia como faixas largas por trás dos cards. Aqui o
   contentor fica transparente e cada pilar ganha o seu próprio contorno. */
@media (max-width:760px){
  .pillars{
    background:transparent;
    border:none;
    border-radius:0;
    overflow:visible;
  }
  .pillar{
    border:1px solid rgba(207,200,190,.6);
    border-radius:var(--radius-card);
  }
}

/* ---------- 4. Botão "Enviar mensagem" centrado ----------
   O `margin-inline:auto` já existia mas não fazia nada: `.btn` é
   `inline-flex`, e margens automáticas só centram elementos de bloco. */
@media (max-width:1023.98px){
  form .btn{
    display:flex;
    margin-inline:auto;
  }
}

/* ==========================================================
   DESKTOP (>=1024px) — ritmo da value-bar, ornamento e escala da Empresa
   Escopo deliberado: o layout mobile/tablet foi afinado à parte, por isso
   nada aqui desce abaixo dos 1024px.
   ========================================================== */
@media (min-width:1024px){

  /* ---------- 1. Respiro simétrico à volta da div dos cards ----------
     A .value-bar tinha margin-top:clamp(30px,4.5vh,58px) e margin-bottom:0,
     logo encostava à secção Empresa. Repetir a MESMA expressão em baixo dá
     hero -> cards -> empresa com a mesma distância dos dois lados. */
  .value-bar{
    margin-bottom:clamp(30px,4.5vh,58px);
  }

  /* ---------- 2. Ornamento removido no desktop ---------- */
  .value-bar-orn{
    display:none;
  }

  /* ---------- 3. Secção Empresa ----------
     O `transform:scale(1.2)` que vivia aqui foi removido: `transform` não
     ocupa espaço no layout, por isso a secção media 900px para o fluxo mas
     desenhava 1080px e 1710px de largura (medido a 1440px de viewport), o
     que (a) cortava a grelha nos dois lados — l:-143 / r:1567 contra 1425 de
     viewport — e (b) punha o scroll-snap a alinhar pela caixa de layout, não
     pelo que se vê. A escala passou para `.about-grid` com `zoom`, que ao
     contrário de `transform` conta para o layout. Ver bloco "REVISÃO" no fim. */
}

/* ==========================================================
   REVISÃO — espaço da Empresa, escalas, snap centrado,
   alinhamento do header e imagem da Academy.

   Este bloco é o último do ficheiro de propósito: substitui hacks anteriores
   por cascata em vez de os editar em vários sítios.

   Escopos usados aqui, e porquê:
     >=1024px  -> só o padding do header (é onde reaparece logótipo + nav + CTA).
     >=1101px  -> snap centrado, escalas da Empresa/Consultoria, altura dos
                  Produtos e grelha da Academy. 1101px é onde as grelhas do
                  ficheiro deixam de colapsar para 1 coluna
                  (@media(max-width:1100px)) e, portanto, onde uma secção volta
                  a caber num ecrã.
     +min-height:820px -> só a fixação rígida da altura dos Produtos.
   Nada aqui desce abaixo dos 1024px, logo o mobile e o tablet ficam intactos.
   ========================================================== */

/* ---------- 0. SNAP SCROLL: removido e reaplicado ao centro ----------
   Antes: `html{scroll-snap-type:y proximity; scroll-padding-top:108px}` +
   `section{scroll-snap-align:start}`. Duas coisas o quebravam:
     · `align:start` com `scroll-padding-top:108px` encostava o TOPO da secção
       108px abaixo do topo do ecrã. Como as secções medem 100svh, os últimos
       108px ficavam fora do ecrã e o conteúdo (centrado na caixa) parava 54px
       abaixo do centro óptico.
     · A caixa de layout de #empresa não coincidia com o que se via (ver acima),
       logo o ponto de snap dessa secção caía ~270px acima do conteúdo.
   Agora: `align:center` sem scroll-padding — o browser centra a secção no ecrã.

   PORQUE 1101px E NÃO 1024px: "uma secção = um ecrã" só é verdade onde as
   grelhas são de 2/3 colunas. O ficheiro já colapsa .about-grid, .consult-grid,
   .contact-grid, .cards, .dna e .faq-grid para 1 (ou 2) colunas em
   @media(max-width:1100px). Medido a 1060x900 com o snap ligado: metodo 1512px,
   contactos 1259px, consultoria 1077px, empresa 1035px — centrar isso num ecrã
   de 900px cortava conteúdo nas duas pontas. Dos 1101px para cima todas as
   secções medem exactamente 100svh (medido a 1440x900). Abaixo, scroll normal. */
html{
  scroll-snap-type:none;
}
section,
.hero{
  scroll-snap-align:none;
}

@media (min-width:1101px){
  html{
    scroll-snap-type:y proximity;   /* proximity, não mandatory: o rodapé e a
                                       value-bar não são pontos de snap e têm
                                       de continuar alcançáveis */
    scroll-padding:0;               /* zero só aqui: é o que faz o `center` ser
                                       exacto. Abaixo dos 1101px mantém-se o
                                       scroll-padding-top:var(--header-h)
                                       original, que é o que impede os links de
                                       ancoragem de esconderem o topo da secção
                                       debaixo do header fixo. */
  }
  /* `.hero` precisa de estar aqui pelo nome: `.hero{scroll-snap-align:start}`
     tem especificidade (0,1,0) e um selector `section` (0,0,1) não o venceria. */
  section,
  .hero{
    scroll-snap-align:center;
    scroll-snap-stop:normal;
  }
}

/* ---------- 2.1 / 2.2 HEADER: logótipo alinhado com o texto do hero ----------
   Fica em >=1024px (e não 1101px como o resto) porque é a partir dos 1024px que
   o header volta a ter logótipo + nav + CTA; abaixo disso o .brand está
   display:none e só há o hambúrguer.
   O texto do hero está a 2x --pad da esquerda: --pad da secção
   (`section{padding:... var(--pad)}`) + --pad de `.hero-inner`. O header só
   tinha 1x. Medido a 1440: logótipo a 66px, "CUIDADO PREMIUM" a 132px.
   O PNG do logótipo não tem margem transparente (caixa alfa = 760x302 de
   760x302), por isso a borda da imagem é a borda visível — dobrar o padding
   alinha os dois ao pixel. `space-between` leva o CTA à mesma distância da
   direita, como pedido. */
@media (min-width:1024px){
  header{
    padding-inline:calc(var(--pad) * 2);
  }
}

@media (min-width:1101px){

  /* ---------- 0.1 Folga para o header fixo ----------
     Consequência directa de trocar `align:start` + `scroll-padding-top:108px`
     por `align:center` + `scroll-padding:0`: a secção passou a ocupar 0..100svh
     e o `padding-top` de 64.8px deixava o eyebrow do section-head (topo a 64.8px)
     debaixo do header, que quando tem scroll mede 84px e é 94% opaco — media-se
     "ROSA AZUL RESIDENCIAL" cortado ao meio.
     32px extra põem o eyebrow a 96.8px, ou seja 12.8px abaixo do header, e
     empurram o conteúdo apenas 16px para baixo do centro geométrico (o centro
     óptico da área visível 84..900 é 492, portanto isto aproxima-se dele).
     Não usar `padding-block`: o de baixo tem de ficar em var(--space-section)
     para o orçamento vertical não perder o dobro. */
  section:not(.hero){
    padding-top:calc(var(--space-section) + 32px);
  }

  /* ---------- 1. EMPRESA: menos vazio, conteúdo a 108% ----------
     Medido a 1440x900: 267px de vazio acima da grelha e 266px abaixo.
     ~70% removido -> 80px de cada lado (`padding-block`), o que só é possível
     com `min-height:0` — o vazio vinha de `min-height:100svh` +
     `justify-content:center`, não do padding.

     Escala: 1.2 (antes) x 0.9 (-10% pedido) = 1.08. `zoom` em vez de
     `transform` porque conta para o layout, logo a secção volta a medir o que
     desenha e o snap acerta. O `max-width` é dividido pelo mesmo factor para o
     resultado renderizar exactamente os 1280px pretendidos em vez de 1382px. */
  #empresa{
    transform:none;
    margin-bottom:0;
    min-height:0;
    padding-block:80px;
  }
  #empresa .about-grid{
    zoom:1.08;
    max-width:calc(1280px / 1.08);
  }

  /* ---------- 1.2 PRODUTOS: mesma altura que Consultoria ----------
     Consultoria mede 100svh. Residencial media 1009px e Profissional 1040px
     (a 1440x900), porque o conteúdo dos cards passava o min-height — e as duas
     diferiam 31px entre si por causa das tags que mudam de linha.

     Em vez de acertar à mão uma dúzia de paddings (que voltaria a desalinhar
     assim que um texto mudasse), a altura da secção é fixada (ver 1.2b, que é
     onde vive o `height:100svh` — depende também da altura do ecrã) e a área da
     FOTOGRAFIA absorve a folga que sobra ou falta. Assim as duas secções medem
     exactamente 100svh e a única diferença entre elas passa a ser a altura da
     foto. Medido a 1440x950 e 1440x900: as três secções (Consultoria,
     Residencial, Profissional) ficam iguais ao pixel.

     Porque é que tem de ser `height` e não só `min-height`: sem uma altura
     DEFINIDA não existe espaço livre negativo para distribuir, logo nada
     encolhe e o media assumia a altura do rácio (246px) — a secção ia aos
     ~930px. Com `height` definido há espaço negativo e o media cede.

     Os restantes filhos (section-head, controlos, nota) também encolheriam
     (`flex-shrink:1` por omissão), mas a "automatic minimum size" do flexbox
     (`min-height:auto` -> `min-content`) impede-os de ir abaixo do conteúdo —
     por isso só o media cede, que é o que se quer. */
  .products-showcase{
    min-height:100svh;
  }

  /* Os 32px de folga do ponto 0.1 saem do orçamento vertical. Estes ~33px de
     "chrome" — margens entre section-head, controlos e nota final — devolvem-nos,
     para a fotografia não pagar a folga do header. */
  .products-showcase .section-head{
    margin-bottom:16px;
  }
  /* O rótulo de estado também paga o seu lugar no orçamento vertical: encolhe
     as margens para a fotografia não perder altura na secção fixada a 100svh. */
  .products-showcase .section-status{
    margin:0 auto 12px;
    padding-block:6px;
  }
  .products-showcase .ra-products-controls{
    margin-top:16px;
  }
  .products-showcase .products-note{
    margin-top:14px;
  }

  .products-showcase .product-section-inner{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  .products-showcase .ra-products-slider{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  .products-showcase .ra-products-viewport{
    flex:1 1 auto;
    min-height:0;
  }
  /* A pista passa a GRELHA de 2 linhas com `subgrid` nos cards. É o que permite
     ter as duas coisas ao mesmo tempo:
       · a secção com exactamente 100svh (a linha `1fr` estica com o ecrã);
       · a fotografia com a MESMA altura em todos os cards da fila (todos
         partilham a linha 1) e o corpo do texto a começar na mesma altura
         (todos partilham a linha 2, dimensionada pelo corpo mais alto).
     Com flex isto era impossível: cada card resolvia a sua altura em separado,
     por isso descrições de 2 ou 3 linhas — e tags que passam a 2 filas em ecrãs
     mais estreitos — davam fotografias de 150px ao lado de outras de 185px.
     `grid-auto-flow:column` mantém os cards em fila e o `offsetLeft` que o JS
     do carrossel usa para paginar continua válido (itens de grelha também o
     têm). Abaixo de 1101px a pista continua flex, intocada. */
  .products-showcase .ra-products-track{
    height:100%;
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:calc((100% - 2 * var(--product-gap)) / 3);
    grid-template-rows:1fr auto;
    align-items:stretch;
  }
  .products-showcase .ra-product-card{
    display:grid;
    grid-template-rows:subgrid;
    grid-row:1 / span 2;
    min-height:0;
  }
  /* O `aspect-ratio` é o tamanho de PARTIDA da linha `1fr`: com a secção fixada
     a linha estica ou encolhe a partir dele, e sem fixação (ecrãs com menos de
     820px de altura, ver 1.2b) fica exactamente neste rácio. Foi por isto que
     `aspect-ratio:auto` não servia: caía no rácio intrínseco da fotografia
     (~quadrada, 395px) e a secção sem fixação ia aos 1055px — PIOR do que os
     1009px originais. Com 1.6/1 dá 246px e ~932px de secção.
     `overflow:hidden` porque a linha `1fr` pode ficar mais baixa do que o
     rácio pede; a foto é `object-fit:cover`, por isso corta em vez de deformar. */
  .products-showcase .ra-product-card__media{
    aspect-ratio:1.6 / 1;
    flex:1 1 auto;      /* ainda serve o caso sem `pin` (ver 1.2b) */
    min-height:150px;
    min-width:0;
    overflow:hidden;
  }
  .products-showcase .ra-product-card__body{
    flex:0 0 auto;
  }

  /* ---------- 1.3 CONSULTORIA: as 2 colunas a 125% ----------
     Só a grelha (texto + cards); o kicker "Consultoria Rosa Azul" fica na
     escala original, como pedido. `max-width` dividido por 1.25 para os
     1180px renderizarem 1180px e não 1475px (que passaria os 1425px úteis). */
  #consultoria .consult-grid{
    zoom:1.25;
    max-width:calc(var(--content-max) / 1.25);
  }
  /* A grelha 25% mais alta deixava a secção a 902px a 1101px de largura (2px
     acima dos 900 de `min-height`), o que a punha no regime "snap area maior
     que o snapport" — nesse regime o browser aceita um INTERVALO de posições
     em vez de uma só, e a Consultoria era a única secção sem centragem exacta.
     Apertar o espaço abaixo do kicker devolve ~9px e volta a caber. */
  #consultoria .section-kicker{
    margin-bottom:clamp(18px,2.2vw,26px);
  }

  /* ---------- 3. ACADEMY: imagem centrada e +20% ----------
     440px -> 528px. A coluna direita de `1.1fr .9fr` só dava 502px, logo a
     imagem maior não caberia; `1fr 1fr` dá 558px a 1440px e continua a
     acomodar os parágrafos, que já estão limitados a 520px.
     `align-self:center` explícito para a imagem ficar centrada em relação ao
     bloco `.academy-text` (que é o que define a altura da linha) mesmo que a
     altura do texto mude. */
  .academy-grid{
    grid-template-columns:1fr 1fr;
    align-items:center;
  }
  .academy-card--image{
    max-width:min(528px,100%);
    justify-self:center;
    align-self:center;
    margin-inline:auto;
  }
}

/* ---------- 1.2b O "pin" de altura dos Produtos só em ecrãs altos o bastante ----------
   `height:100svh` é uma altura RÍGIDA: se o mínimo do conteúdo não couber lá
   dentro, transborda para a secção seguinte (a secção só tem overflow-x:hidden).
   O card mais alto (Profissional, descrição+título a quebrar linha) mede ~278px
   de corpo, não os 227px estimados na primeira versão deste comentário — nesse
   card, a 820px de altura de ecrã, a foto ficava esmagada abaixo do seu
   min-height e ~23px do card (as tag pills) saíam cortados por
   `.ra-product-card{overflow:hidden}`, sem barra de scroll nem qualquer aviso.
   Medido: o requisito real chega aos ~888px consoante a largura. 900px cobre
   isso com folga e continua a coincidir com a base de cálculo (100svh)
   validada em todo o resto deste bloco. Abaixo disso não se fixa a altura e a
   secção volta a crescer naturalmente (fica mais alta do que a Consultoria, o
   que é preferível a texto cortado). */
@media (min-width:1101px) and (min-height:900px){
  .products-showcase{
    height:100svh;
  }
}

/* ---------- 2.2b Header a 1024–1280px: compactar para o padding dobrado caber ----------
   Medido a 1024px: o header precisa de 818px de conteúdo e o padding dobrado
   só deixa 804px — faltavam 14px, e o `.brand` (item flex encolhível) era o
   primeiro a pagar. Esta faixa comprime nav/CTA/logótipo o suficiente para
   ~60px de folga. Estende-se até 1280px porque a 1201px a folga sem compactar
   seria de apenas 21px. Substitui a faixa 1024–1200px definida acima. */
@media (min-width:1024px) and (max-width:1280px){
  .nav-inner{gap:12px}
  .brand img{height:48px}
  header.scrolled .brand img{height:42px}
  nav.main{gap:clamp(8px,.85vw,14px)}
  nav.main a{font-size:12.5px}
  .header-cta{
    padding:0 15px;
    gap:8px;
    font-size:11.5px;
    letter-spacing:.05em;
  }
}