/* ==========================================================================
   CleanBreeze — landing page
   Replication of the Figma design (Landing page design / limpeza-condutas).

   Loaded ONLY by views/homepage.tpl, after Bootstrap 3 + base.css + custom.css.

   IMPORTANT: every rule is scoped under `body.cb-page` on purpose. Bootstrap 3
   and custom.css are global and shared with every other page on the site —
   scoping here means this file physically cannot leak into them.

   Palette (from the design; it hardcoded these inline):
     #1085b7  brand blue        #0d75a3  blue dark
     #1e1e1e  ink               #c6c850  lime      #b5b847  lime dark
   ========================================================================== */

/* --------------------------------------------------------------------------
   ROOT FONT SIZE — load-bearing, do not remove.

   Bootstrap 3 sets `html { font-size: 10px }` in its reset. Every rem in this
   file is ported straight from the Figma design, which assumes a 16px root
   (theme.css: `--font-size: 16px; html { font-size: var(--font-size) }`).

   Without this, rem resolves against 10px and the whole page renders at 62.5%
   of the design — proportionally correct but visibly shrunken.

   Safe to declare globally here: this stylesheet is only linked from the
   CleanBreeze canals (homepage.tpl, cleanbreeze.tpl), so it cannot reach any
   other page. It also loads after
   bootstrap.min.css, so it wins.
   -------------------------------------------------------------------------- */
html {
    font-size: 16px;
}

body.cb-page {
    --cb-blue: #1085b7;
    --cb-blue-dark: #0d75a3;
    --cb-ink: #1e1e1e;
    --cb-lime: #c6c850;
    --cb-lime-dark: #b5b847;
    --cb-grey: #6b7280;
    --cb-grey-light: #9ca3af;
    --cb-bg-soft: #f9fafb;
    --cb-border: #f3f4f6;
    --cb-ease: cubic-bezier(0.22, 1, 0.36, 1);

    font-family: 'Host Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--cb-ink);
    overflow-x: hidden;
    background: #fff;
}

/* --------------------------------------------------------------------------
   Bootstrap 3 neutralisation (scoped)
   Bootstrap sets its own font, type scale and link colour. Undo it here only.
   -------------------------------------------------------------------------- */
/* NOTE ON :where() — this is load-bearing, do not "simplify" it.
 *
 * These rules only exist to undo Bootstrap 3. They must:
 *   - BEAT Bootstrap's bare element selectors  (h1 / a / button = 0,0,1)
 *   - LOSE to every component class below      (.cb-hero__sub = 0,1,0)
 *
 * Written as `body.cb-page p` they score 0,1,2 and win BOTH fights — which
 * silently zeroed every margin and colour in this file. (That was the "no gaps
 * between text" and "invisible button text" bug.)
 *
 * :where() contributes zero specificity, so `:where(body.cb-page) p` scores
 * 0,0,1 — a tie with Bootstrap, won on source order (we load last), and a
 * clean loss to any .cb-* class. Exactly what we want.
 */
:where(body.cb-page) h1,
:where(body.cb-page) h2,
:where(body.cb-page) h3,
:where(body.cb-page) h4,
:where(body.cb-page) p {
    margin: 0;
    font-family: inherit;
}

:where(body.cb-page) a {
    color: inherit;
    text-decoration: none;
}

/* Bootstrap's `a:hover, a:focus` is 0,1,1 — match it so we win on order. */
:where(body.cb-page) a:hover,
:where(body.cb-page) a:focus {
    color: inherit;
    text-decoration: none;
}

:where(body.cb-page) img {
    max-width: 100%;
    display: block;
}

body.cb-page *,
body.cb-page *::before,
body.cb-page *::after {
    box-sizing: border-box;
}

:where(body.cb-page) button {
    font-family: inherit;
    border: 0;
    background: none;
    cursor: pointer;
}

/* Focus visibility — the design had none, which is an a11y fail. */
body.cb-page a:focus-visible,
body.cb-page button:focus-visible,
body.cb-page input:focus-visible,
body.cb-page textarea:focus-visible {
    outline: 2px solid var(--cb-lime);
    outline-offset: 2px;
}

.cb-skip {
    position: absolute;
    left: -9999px;
}
.cb-skip:focus {
    left: 1rem;
    top: 1rem;
    z-index: 100;
    background: #fff;
    color: #000;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
/* The design uses TWO container patterns — they are not interchangeable.
 *
 *  a) Sections:  <section class="py-20 px-6"> <div class="max-w-screen-xl mx-auto">
 *     Padding sits on the SECTION; the inner box is pure max-width.
 *     -> content is a full 1280px on desktop.
 *
 *  b) Header / hero / footer:  <div class="max-w-screen-xl mx-auto px-6 md:px-10">
 *     Padding sits INSIDE the max-width box.
 *     -> content is 1280 - 80 = 1200px on desktop.
 *
 * So the design's sections are deliberately 40px wider per side than its
 * header. Using one padded container for everything (as I first did) shrinks
 * every section to 1200px and reads as "missing margins" against the Figma.
 */
.cb-container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

/* Pattern (b) — header, hero, footer only. */
.cb-container--pad {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 768px) {
    .cb-container--pad {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* Pattern (a) — py-20 px-6 */
.cb-section {
    padding: 5rem 1.5rem;
}

.cb-eyebrow {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}

.cb-h2 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 500;
    line-height: 1.3;
}

.cb-lead {
    color: var(--cb-grey);
    font-size: 1rem;
    line-height: 1.65;
}

.cb-center { text-align: center; }

/* --------------------------------------------------------------------------
   Header — transparent over hero, solid blue past 60px
   -------------------------------------------------------------------------- */
.cb-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    transition: background 0.3s, box-shadow 0.3s;
}

.cb-header[data-scrolled="true"] {
    background: rgba(16, 133, 183, 0.97);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.cb-header__inner {
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cb-header__logo img {
    height: 3.5rem;
    width: auto;
    object-fit: contain;
}

.cb-nav {
    display: none;
    align-items: center;
    gap: 2rem;
}

@media (min-width: 768px) {
    .cb-nav { display: flex; }
}

.cb-nav a {
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    transition: color 0.2s;
}
.cb-nav a:hover { color: #fff; }

.cb-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s, transform 0.2s, opacity 0.2s;
}

.cb-btn--dark {
    background: var(--cb-ink);
    color: #fff;
    padding: 0.625rem 1.25rem;
    font-size: 16px;
}
.cb-btn--dark:hover { background: #000; color: #fff; }

.cb-burger {
    display: block;
    color: #fff;
    padding: 0.5rem;
}
@media (min-width: 768px) {
    .cb-burger { display: none; }
}

.cb-drawer {
    display: none;
    background: var(--cb-blue);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1.25rem 1.5rem;
    flex-direction: column;
    gap: 1.25rem;
}
.cb-drawer.is-open { display: flex; }
@media (min-width: 768px) {
    .cb-drawer.is-open { display: none; }
}
.cb-drawer a {
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
}
.cb-drawer .cb-btn--dark { justify-content: center; padding: 0.75rem 1.25rem; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.cb-hero {
    position: relative;
    height: 100vh;
    min-height: 620px;
    display: flex;
    align-items: center;
}

.cb-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    animation: cb-hero-zoom 1.6s ease-out both;
}

@keyframes cb-hero-zoom {
    from { transform: scale(1.08); }
    to   { transform: scale(1); }
}

.cb-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.cb-hero__inner {
    position: relative;
    z-index: 10;
}

/* The hero eyebrow is mb-4 (16px) in the design — every other eyebrow is
   mb-3 (12px). Easy to miss; it is not a typo. */
.cb-hero__eyebrow {
    color: var(--cb-lime);
    margin-bottom: 1rem;
}

.cb-hero h1 {
    color: #fff;
    max-width: 48rem;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 1.5rem;
}

.cb-hero__sub {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.125rem;
    max-width: 36rem;
    margin-bottom: 2.5rem;
}

.cb-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.cb-btn--hero {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
}

.cb-btn--ghost {
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
}
.cb-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.cb-hero__scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
}

.cb-hero__line {
    width: 1px;
    height: 0;
    background: rgba(255, 255, 255, 0.5);
    animation: cb-hero-line 0.8s ease-out 1.4s both;
}

@keyframes cb-hero-line {
    to { height: 48px; }
}

/* Hero on-load sequence (was framer-motion `animate`) */
.cb-in {
    opacity: 0;
    animation: cb-in 0.65s var(--cb-ease) both;
    animation-delay: var(--d, 0s);
}

@keyframes cb-in {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Intro strip
   -------------------------------------------------------------------------- */
.cb-intro {
    background: var(--cb-blue);
    padding: 4rem 1.5rem;   /* design: py-16 px-6 */
}

.cb-intro__grid {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 768px) {
    .cb-intro__grid { grid-template-columns: 1fr 1fr; }
}

.cb-intro h2 {
    color: #fff;
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 1rem;
}

.cb-intro__rule {
    height: 4px;
    width: 0;
    background: var(--cb-lime);
    transition: width 0.6s var(--cb-ease) 0.3s;
}
.cb-intro__rule.is-visible { width: 48px; }

.cb-intro p {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */
.cb-services { background: #fff; }

.cb-head { margin-bottom: 3.5rem; }
.cb-head .cb-h2 { max-width: 42rem; margin: 0 auto; }
.cb-head .cb-lead { margin: 1rem auto 0; max-width: 36rem; }

.cb-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .cb-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .cb-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.cb-card {
    background: #fff;
    border: 1px solid var(--cb-border);
    border-radius: 0.75rem;
    padding: 1.75rem;
    transition: transform 0.25s var(--cb-ease), box-shadow 0.25s var(--cb-ease),
                opacity 0.6s var(--cb-ease);
}

.cb-card.is-visible:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.cb-card__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background: var(--cb-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    transition: background-color 0.25s;
}
.cb-card:hover .cb-card__icon { background: var(--cb-lime); }

.cb-card h3 {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.cb-card p {
    color: var(--cb-grey);
    font-size: 0.875rem;
    line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Articles
   -------------------------------------------------------------------------- */
.cb-articles { background: #fff; }

.cb-articles__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;      /* design: items-center */
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.5rem;    /* design: mb-10 */
}

.cb-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s;
}
.cb-link:hover { color: var(--cb-blue); }

.cb-grid--3 { grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 640px) { .cb-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cb-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.cb-article {
    display: flex;
    flex-direction: column;
    transition: transform 0.25s var(--cb-ease), opacity 0.6s var(--cb-ease);
}
.cb-article.is-visible:hover { transform: translateY(-4px); }

.cb-article__media {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    height: 260px;
    display: block;
}

.cb-article__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.cb-article:hover .cb-article__media img { transform: scale(1.05); }

.cb-tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: #fff;
    color: var(--cb-ink);
    padding: 0.25rem 0.75rem;
    border-radius: 0.125rem;
    font-size: 14px;
    font-weight: 500;
}

.cb-article__body { padding-top: 1.25rem; }

.cb-article__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(30, 30, 30, 0.6);
    font-size: 13px;
    margin-bottom: 0.5rem;
}
.cb-article__meta span { display: inline-flex; align-items: center; gap: 0.25rem; }

.cb-article__title {
    display: block;
    font-size: 19px;
    line-height: 1.35;
    margin-bottom: 0.75rem;
    text-decoration: underline;
    text-decoration-color: rgba(30, 30, 30, 0.3);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.2s;
}
.cb-article:hover .cb-article__title { text-decoration-color: var(--cb-ink); }

.cb-article__excerpt {
    color: var(--cb-grey);
    font-size: 0.875rem;
    line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Split — image + benefits
   -------------------------------------------------------------------------- */
.cb-split { background: var(--cb-bg-soft); }

.cb-split__grid {
    display: grid;
    gap: 3.5rem;
    align-items: center;
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .cb-split__grid { grid-template-columns: 1fr 1fr; }
}

.cb-split__media {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    height: 420px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.cb-split__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cb-split__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(16, 133, 183, 0.6), transparent);
}

.cb-split__caption {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
}

.cb-benefit {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.cb-benefit__tick {
    color: var(--cb-lime);
    flex-shrink: 0;
    margin-top: 2px;
    display: inline-block;
    transform: scale(0);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc(var(--d, 0s) + 0.2s);
}
.is-visible > .cb-benefit__tick { transform: scale(1); }

.cb-benefit__title {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.cb-benefit__text {
    color: var(--cb-grey);
    font-size: 0.875rem;
    line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Process
   -------------------------------------------------------------------------- */
.cb-process { background: var(--cb-ink); }
.cb-process .cb-eyebrow { color: var(--cb-lime); }
.cb-process .cb-h2 { color: #fff; }

.cb-process__grid {
    position: relative;
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) { .cb-process__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cb-process__grid { grid-template-columns: repeat(4, 1fr); } }

.cb-process__rule {
    display: none;
}
@media (min-width: 1024px) {
    .cb-process__rule {
        display: block;
        position: absolute;
        top: 2rem;
        left: 12.5%;
        right: 12.5%;
        height: 1px;
        background: rgba(255, 255, 255, 0.1);
        transform: scaleX(0);
        transform-origin: 0 50%;
        transition: transform 1s ease-in-out;
    }
    .cb-process__rule.is-visible { transform: scaleX(1); }
}

.cb-step {
    position: relative;
    z-index: 10;
    text-align: center;
}

.cb-step__badge {
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    background: var(--cb-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-weight: 500;
    transition: transform 0.25s, background-color 0.25s;
}
.cb-step__badge:hover {
    transform: scale(1.1);
    background: var(--cb-lime);
}

.cb-step h3 {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.cb-step p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    line-height: 1.65;
}

/* --------------------------------------------------------------------------
   CTA banner
   -------------------------------------------------------------------------- */
.cb-cta {
    position: relative;
    padding: 5rem 1.5rem;   /* design: py-20 px-6 */
    overflow: hidden;
}

.cb-cta__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.cb-cta__overlay {
    position: absolute;
    inset: 0;
    background: rgba(16, 133, 183, 0.85);
}

.cb-cta__inner {
    position: relative;
    z-index: 10;
    max-width: 48rem;
    margin: 0 auto;
    text-align: center;
}

.cb-cta h2 {
    color: #fff;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 1rem;
}

.cb-cta p {
    color: rgba(255, 255, 255, 0.85);
    margin: 0 auto 2rem;
    max-width: 36rem;
}

.cb-btn--lime {
    background: var(--cb-lime);
    color: #fff;
    padding: 1rem 2rem;
    font-size: 1rem;
}
.cb-btn--lime:hover { background: var(--cb-lime-dark); color: #fff; }
.cb-btn--lime.is-visible:hover { transform: scale(1.04); }
.cb-btn--lime.is-visible:active { transform: scale(0.97); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.cb-faq { background: var(--cb-bg-soft); }

.cb-faq__list {
    max-width: 48rem;
    margin: 0 auto;
}

.cb-faq__item { border-top: 1px solid #e5e7eb; }
.cb-faq__item:first-child { border-top: 0; }

.cb-faq__trigger {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 0;
    text-align: left;
}

.cb-faq__q {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    transition: color 0.2s;
}
.cb-faq__trigger:hover .cb-faq__q { color: var(--cb-blue); }

.cb-faq__sign {
    color: var(--cb-blue);
    flex-shrink: 0;
    margin-top: 2px;
}

.cb-faq__panel[hidden] { display: none; }

/* Now a <div> wrapping the RTE HTML (was a bare <p>). Colour/size/line-height
   inherit into the children; the reset zeroes <p> margins, so restore spacing
   between blocks in case an editor writes more than one paragraph. */
.cb-faq__a {
    color: var(--cb-grey);
    font-size: 0.875rem;
    line-height: 1.65;
    padding: 0 2.5rem 1.25rem 0;
}
.cb-faq__a > * + * { margin-top: 0.75rem; }
.cb-faq__a ul,
.cb-faq__a ol { padding-left: 1.25rem; margin: 0.75rem 0 0; }
.cb-faq__a li { margin-top: 0.25rem; }
.cb-faq__a a { color: var(--cb-blue); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.cb-contact { background: #fff; }

.cb-contact__grid {
    display: grid;
    gap: 4rem;
    align-items: start;
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .cb-contact__grid { grid-template-columns: 1fr 1fr; }
}

.cb-contact h2 { margin-bottom: 1.5rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.cb-contact__intro { margin-bottom: 2.5rem; }

.cb-contact__row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.cb-contact__ico {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: rgba(16, 133, 183, 0.1);
    color: var(--cb-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cb-contact__label { font-weight: 500; font-size: 0.875rem; }
.cb-contact__sub { color: var(--cb-grey-light); font-size: 0.75rem; margin-top: 2px; }

.cb-form-wrap {
    background: var(--cb-bg-soft);
    border-radius: 1rem;
    padding: 2rem;
}

.cb-field { margin-bottom: 1.25rem; }

.cb-field__row {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .cb-field__row { grid-template-columns: 1fr 1fr; }
}

.cb-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.375rem;
}

.cb-input,
.cb-textarea {
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--cb-ink);
    outline: none;
    transition: border-color 0.2s;
}
.cb-input:focus,
.cb-textarea:focus { border-color: var(--cb-blue); }
.cb-textarea { resize: none; }

.cb-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.cb-consent input {
    margin-top: 2px;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    accent-color: var(--cb-blue);
}
.cb-consent label {
    color: var(--cb-grey);
    font-size: 0.75rem;
    line-height: 1.6;
    cursor: pointer;
    font-weight: 400;
}

.cb-submit {
    width: 100%;
    background: var(--cb-ink);
    color: #fff;
    padding: 0.875rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background-color 0.2s, transform 0.15s;
}
.cb-submit:hover { background: #333; }
.cb-submit:active { transform: scale(0.98); }

.cb-form-success { text-align: center; padding: 2.5rem 0; }
.cb-form-success[hidden] { display: none; }
.cb-form-success__ico { color: var(--cb-lime); display: inline-block; margin-bottom: 1rem; }
.cb-form-success h3 { font-size: 1.25rem; font-weight: 500; margin-bottom: 0.5rem; }
.cb-form-success p { color: var(--cb-grey); font-size: 0.875rem; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
/* ÓRFÃ: o markup do rodapé passou a ser o do site principal (<div id="footer">),
   por isso .cb-footer já não existe na página. Mantida apenas porque o resto do
   bloco .cb-footer__* ainda é usado pelo rodapé partilhado. A cor branca que
   estava aqui foi movida para as regras que dela precisam (ver .cb-nl acima). */
.cb-footer {
    background: var(--cb-blue);
    color: #fff;
    position: relative;
}

.cb-totop {
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    z-index: 10;
    transition: transform 0.2s;
}
.cb-totop:hover { transform: scale(1.05); }

.cb-footer__inner { padding-top: 2.5rem; }

.cb-footer__grid {
    display: grid;
    gap: 2.5rem;
    padding-bottom: 2.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) { .cb-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cb-footer__grid { grid-template-columns: repeat(4, 1fr); } }

.cb-footer__logo {
    height: 67px;
    width: 158px;
    margin-bottom: 1.5rem;
}
.cb-footer__logo img { height: 100%; width: 100%; object-fit: contain; object-position: left; }

.cb-footer__contact {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.cb-footer__contact svg { flex-shrink: 0; margin-top: 2px; }
.cb-footer__note { color: rgba(255, 255, 255, 0.7); font-size: 13px; }

.cb-social { display: flex; align-items: center; gap: 1rem; }
.cb-social a { transition: opacity 0.2s; }
.cb-social a:hover { opacity: 0.75; }

.cb-footer__title { font-size: 18px; font-weight: 700; margin-bottom: 0.75rem; }

.cb-footer__list { list-style: none; margin: 0; padding: 0; }
.cb-footer__list a {
    display: block;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 2.5;
    transition: color 0.2s;
}
.cb-footer__list a:hover { color: #fff; }

/* ── Newsletter do rodapé ─────────────────────────────────────────────────
   NAO depender de herança para a cor. O rodapé é #footer (extraído do site
   principal) e esse só define `background-color: #1085B7` — o branco do texto
   vem de cada bloco (.menusFooter, .bottomFooter, .iconFlex) ter o seu próprio
   color. A minha regra .cb-footer{color:#fff} ficou órfã quando o rodapé do
   Figma foi substituído pelo do site principal, e a newsletter passou a herdar
   o preto do <body>. */
.cb-nl,
.cb-nl__label,
.cb-nl__consent p { color: #fff; }

.cb-nl__label { font-size: 16px; margin-bottom: 0.25rem; display: block; font-weight: 400; }
.cb-nl__field {
    border-bottom: 1px solid #fff;
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
}
.cb-nl__field input {
    width: 100%;
    background: transparent;
    border: 0;
    outline: none;
    color: #fff;
    font-size: 15px;
    font-family: inherit;
}

.cb-nl__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.cb-nl__box {
    border: 1px solid #fff;
    border-radius: 2px;
    flex-shrink: 0;
    margin-top: 2px;
    width: 19px;
    height: 18px;
    position: relative;
    display: block;
}
.cb-nl__box input {
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
}
.cb-nl__consent p { font-size: 12px; line-height: 1.6; }

.cb-nl__submit {
    width: 100%;
    background: var(--cb-lime);
    color: #fff;
    padding: 0.625rem;
    border-radius: 0.5rem;
    font-size: 16px;
    font-weight: 700;
    transition: opacity 0.2s;
}
.cb-nl__submit:hover { opacity: 0.9; }

.cb-footer__divider { border-top: 1px solid rgba(255, 255, 255, 0.3); }

.cb-footer__bottom {
    padding: 1.25rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 14.286px;
}
@media (min-width: 640px) {
    .cb-footer__bottom { flex-direction: row; }
}

.cb-footer__cert { height: 47px; width: 251px; }
.cb-footer__cert img { height: 100%; width: 100%; object-fit: contain; }

/* --------------------------------------------------------------------------
   Scroll reveals (replaces framer-motion whileInView)
   -------------------------------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s var(--cb-ease), transform 0.6s var(--cb-ease);
    transition-delay: var(--d, 0s);
}
[data-reveal][data-reveal-from="left"]  { transform: translateX(-50px); }
[data-reveal][data-reveal-from="right"] { transform: translateX(40px); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Reveal targets that also animate a custom property must not be reset by the
   generic rule above — intro rule and process rule handle their own transform. */
.cb-intro__rule[data-reveal],
.cb-process__rule[data-reveal] { opacity: 1; }
.cb-intro__rule[data-reveal] { transform: none; }

@media (prefers-reduced-motion: reduce) {
    body.cb-page *,
    body.cb-page *::before,
    body.cb-page *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   BLOG-ONLY OVERRIDES of the shared header/footer
   ==========================================================================
   cleanbreeze-header.css is GENERATED from the main site (cleanbreeze.pt) by
   scratchpad/build/extract_css.py — never edit it, it gets overwritten.

   Blog-specific tweaks live HERE. This file loads after it (see homepage.tpl),
   so equal-specificity rules win on source order.

   These changes apply ONLY to blog.cleanbreeze.pt. The main site is untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header logo — smaller than the main site's.
   Main site: 100px desktop / 60px at <=680px.
   Blog:       80px desktop / 48px at <=680px  (same 0.8 ratio, so the
   responsive step is preserved — overriding only the desktop value would let
   this rule win inside the 680px media query too and make the mobile logo
   BIGGER, not smaller).
   -------------------------------------------------------------------------- */
.logotipoHeader {
    height: 80px;
}

@media (max-width: 680px) {
    .logotipoHeader {
        height: 48px;
    }
}

/* --------------------------------------------------------------------------
   Hero copy sits a little below dead-centre.

   .cb-hero is a flex container with align-items:center, so the block is
   vertically centred. translateY shifts it down by an exact amount without
   touching the layout (padding here would only move it by half the value,
   because the box re-centres). Tune the one number below.
   -------------------------------------------------------------------------- */
.cb-hero__inner {
    transform: translateY(60px);
}

/* Keep the scroll indicator where it is — it is positioned against the
   section, not the copy, so it is unaffected by the shift above. */

/* ==========================================================================
   ARTICLE DETAIL  (views/Noticias/templates/new-detail-template-3.tpl)
   Port of the Figma export's ArticleDetail.tsx
   ========================================================================== */

/* -- Hero ---------------------------------------------------------------- */
.cb-art-hero {
    position: relative;
    height: min(520px, 60vw);
    min-height: 360px;
    padding-top: 5rem;              /* clears the fixed 80px header */
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

/* No image yet (uploaded via backoffice later) - flat brand panel, not a gap. */
.cb-art-hero--flat { background: var(--cb-blue); }

.cb-art-hero__bg {
    position: absolute;
    inset: 0;
}
.cb-art-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: cb-hero-zoom 1.4s ease-out both;
}

.cb-art-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.cb-art-hero--flat .cb-art-hero__overlay { background: rgba(0, 0, 0, 0.2); }

.cb-art-hero__inner {
    position: relative;
    z-index: 10;
    padding-bottom: 2.5rem;
}

/* -- Breadcrumb ---------------------------------------------------------- */
.cb-art-crumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    animation: cb-in 0.5s var(--cb-ease) 0.3s both;
}
.cb-art-crumbs__back {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s;
}
.cb-art-crumbs__back:hover { color: #fff; }
.cb-art-crumbs__sep { color: rgba(255, 255, 255, 0.4); }
.cb-art-crumbs__here {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -- Hero meta ----------------------------------------------------------- */
.cb-art-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    animation: cb-in 0.5s var(--cb-ease) 0.4s both;
}
.cb-art-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}
.cb-art-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: #fff;
    color: var(--cb-ink);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: 0.125rem;
}

.cb-art-title {
    color: #fff;
    max-width: 48rem;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 400;
    line-height: 1.2;
    animation: cb-in 0.6s var(--cb-ease) 0.5s both;
}

/* -- Body grid ----------------------------------------------------------- */
.cb-art-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3.5rem;
    align-items: start;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}
@media (min-width: 1024px) {
    .cb-art-grid { grid-template-columns: 1fr 320px; }
}

/* Lead / excerpt */
.cb-art-lead {
    color: var(--cb-blue);
    border-left: 4px solid var(--cb-blue);
    padding-left: 1.25rem;
    margin-bottom: 2rem;
    font-size: 18px;
    line-height: 1.65;
}

/* -- Article body ----------------------------------------------------------
   The CMS hands us `texto` as one HTML blob, so the design's per-block JSX
   styling is expressed here instead. Keeps the body editable in TinyMCE.
   -------------------------------------------------------------------------- */
.cb-article__body > * + * { margin-top: 1.5rem; }

.cb-article__body p {
    color: rgba(30, 30, 30, 0.8);
    font-size: 16px;
    line-height: 1.75;
}

.cb-article__body h2 {
    color: var(--cb-ink);
    font-size: clamp(1.1rem, 2.5vw, 1.35rem);
    font-weight: 500;
    line-height: 1.35;
    margin-top: 2rem;
}

.cb-article__body blockquote {
    background: rgba(16, 133, 183, 0.04);
    border-left: 4px solid var(--cb-lime);
    padding: 1rem 1.25rem;
    margin: 2rem 0;
}
.cb-article__body blockquote p {
    color: var(--cb-ink);
    font-style: italic;
    font-size: 16px;
    line-height: 1.75;
}

.cb-article__body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cb-article__body ul > li {
    position: relative;
    padding-left: 1.5rem;
    color: rgba(30, 30, 30, 0.8);
    font-size: 16px;
    line-height: 1.75;
}
.cb-article__body ul > li + li { margin-top: 0.5rem; }
/* the dot from the design, as a marker */
.cb-article__body ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--cb-blue);
}

/* -- In-article CTA ------------------------------------------------------ */
.cb-art-cta {
    margin-top: 3.5rem;
    background: var(--cb-blue);
    border-radius: 0.75rem;
    padding: 2rem;
    color: #fff;
}
.cb-art-cta__title { font-size: 22px; font-weight: 500; line-height: 1.35; margin-bottom: 0.75rem; }
.cb-art-cta__text  { font-size: 15px; color: rgba(255, 255, 255, 0.8); margin-bottom: 1.5rem; }
.cb-art-cta .cb-btn--lime { padding: 0.75rem 1.5rem; font-size: 0.875rem; }

/* -- Sidebar ------------------------------------------------------------- */
.cb-art-side { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 1024px) {
    .cb-art-side { position: sticky; top: 7rem; }
}

.cb-art-side__back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--cb-blue);
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s;
}
.cb-art-side__back:hover { color: var(--cb-blue-dark); }

.cb-art-side__title {
    font-size: 18px;
    font-weight: 500;
    color: var(--cb-ink);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--cb-border);
}

/* -- Related cards ------------------------------------------------------- */
.cb-art-rel { display: flex; flex-direction: column; gap: 1.75rem; }

.cb-art-rel__card { display: block; }

.cb-art-rel__media {
    position: relative;
    display: block;
    height: 200px;
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 0.75rem;
}
.cb-art-rel__media--flat { background: var(--cb-blue); }
.cb-art-rel__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.cb-art-rel__card:hover .cb-art-rel__media img { transform: scale(1.05); }
.cb-art-rel__media .cb-tag { top: 0.75rem; left: 0.75rem; font-size: 13px; padding: 0.25rem 0.625rem; }

.cb-art-rel__date {
    display: block;
    font-size: 13px;
    font-weight: 300;
    color: rgba(30, 30, 30, 0.6);
    margin-bottom: 0.25rem;
}
.cb-art-rel__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 17px;
    line-height: 1.35;
    color: var(--cb-ink);
    text-decoration: underline;
    text-decoration-color: rgba(30, 30, 30, 0.3);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.2s;
}
.cb-art-rel__card:hover .cb-art-rel__title { text-decoration-color: var(--cb-ink); }

/* -- Sidebar help card --------------------------------------------------- */
.cb-art-help {
    background: var(--cb-bg-soft);
    border: 1px solid var(--cb-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
}
.cb-art-help__title { font-size: 16px; font-weight: 500; color: var(--cb-ink); margin-bottom: 0.5rem; }
.cb-art-help__text  { font-size: 13px; color: var(--cb-grey); line-height: 1.65; margin-bottom: 1rem; }
.cb-art-help__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--cb-blue);
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s;
}
.cb-art-help__cta:hover { color: var(--cb-blue-dark); }

/* Article card with no image yet (uploaded via backoffice later) — flat brand
   panel so the card keeps its shape instead of collapsing. */
.cb-article__media--flat { background: var(--cb-blue); }

/* Hero with no banner image yet (uploaded via backoffice later) — flat brand
   panel instead of an empty box. Matches .cb-art-hero--flat. */
.cb-hero--flat { background: var(--cb-blue); }
.cb-hero--flat .cb-hero__overlay { background: rgba(0, 0, 0, 0.2); }

/* ==========================================================================
   ARTICLES CAROUSEL
   Port of ArticlesSection.tsx (perPage = 3, arrows + dot indicators).
   Arrows/dots only exist in the DOM when there is more than one page.
   ========================================================================== */

/* Design: <h2> "Artigos", clamp(1.5rem, 3vw, 1.875rem), weight 500.
   (Earlier this was an eyebrow + "Do nosso blog" — that was my invention,
   not the design.) */
.cb-articles__title {
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: 500;
    color: var(--cb-ink);
    line-height: 1.3;
}

.cb-carousel__nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cb-carousel__btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s, opacity 0.2s;
}

/* Design gives the two arrows different weights: prev is grey, next is black. */
.cb-carousel__btn--prev {
    border: 1px solid #929292;
    color: #929292;
}
.cb-carousel__btn--prev:hover:not(:disabled) {
    border-color: var(--cb-ink);
    color: var(--cb-ink);
}

.cb-carousel__btn--next {
    border: 1px solid #000;
    color: #000;
}
.cb-carousel__btn--next:hover:not(:disabled) {
    background: var(--cb-ink);
    color: #fff;
}

.cb-carousel__btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.cb-carousel__page[hidden] { display: none; }

.cb-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.cb-carousel__dot {
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    background: #d9d9d9;
    transition: background-color 0.2s;
}
.cb-carousel__dot.is-active { background: #14a6c1; }
.cb-carousel__dot:hover     { background: #b8b8b8; }
.cb-carousel__dot.is-active:hover { background: #14a6c1; }

/* Telefone e email do "Fale connosco" são clicáveis (tel: / mailto:), como no
   rodapé. O reset zera a cor dos links, por isso herdam o tom do texto. */
.cb-contact__label a { color: inherit; }
.cb-contact__label a:hover { color: var(--cb-blue); }

/* ── Erros do formulário de contacto ─────────────────────────────────────
   O módulo Formulários valida do lado do servidor e devolve mensagens por
   campo (ver application/Form/Controller.php, modo AJAX). */
.cb-field__err,
.cb-form__err {
    color: var(--cb-destructive, #d4183d);
    font-size: 0.75rem;
    line-height: 1.5;
    margin-top: 0.375rem;
}
.cb-field__err[hidden],
.cb-form__err[hidden] { display: none; }

.cb-form__err {
    background: rgba(212, 24, 61, 0.06);
    border-left: 3px solid #d4183d;
    padding: 0.625rem 0.875rem;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
}

.cb-input.is-invalid,
.cb-textarea.is-invalid { border-color: #d4183d; }

.cb-submit:disabled { opacity: 0.6; cursor: default; }

/* Secção dividida sem imagem carregada ainda — painel liso, como o hero. */
.cb-split__media--flat { background: var(--cb-blue); }

/* Resposta da newsletter do rodapé (fundo azul, por isso as cores são claras). */
.cb-nl__msg {
    font-size: 12px;
    line-height: 1.5;
    margin-top: 0.625rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    border-left: 3px solid var(--cb-lime);
    padding: 0.5rem 0.625rem;
}
.cb-nl__msg[hidden] { display: none; }
.cb-nl__msg.is-error {
    background: rgba(0, 0, 0, 0.25);
    border-left-color: #ffb4b4;
}
.cb-nl__submit:disabled { opacity: 0.6; cursor: default; }

/* ── 404 / 403 ───────────────────────────────────────────────────────────
   FUNDO AZUL DE PROPOSITO, nao é decoração.

   O header é branco por desenho — foi feito para assentar sobre o hero escuro,
   e o `#menu_id_19 li, a { color: #FFF }` do site principal é fixo: ao fazer
   scroll só muda o FUNDO (#site-header[data-scrolled]), nunca o texto.

   Numa página branca e curta como esta, não há scroll, o header fica
   transparente e o menu desaparece — branco sobre branco.

   Por isso a secção inteira é um painel azul, exactamente como o hero do
   detalhe de notícia faz quando ainda não tem imagem (.cb-art-hero--flat).
   O header volta a ter contraste e a linguagem visual mantém-se.

   O header é position:absolute, daí o padding generoso em cima. */
.cb-404 {
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 12rem 0 6rem;
    background: var(--cb-blue);
    color: #fff;
}
.cb-404__inner { text-align: center; }

.cb-404__code {
    font-size: clamp(4rem, 12vw, 8rem);
    font-weight: 700;
    line-height: 1;
    color: #fff;
    opacity: 0.25;
    margin-bottom: -1rem;
}
.cb-404__title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 500;
    color: #fff;
    margin-bottom: 1rem;
}
.cb-404__text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 34rem;
    margin: 0 auto 2rem;
}

/* O botão escuro tem bom contraste sobre o azul, tal como no hero. */
.cb-404 .cb-btn--dark { color: #fff; }