/* ============================================================
   RECICLA ÓLEO — hotsite skin
   Loaded only on /{lang}/recicla-oleo, after public.css.

   The project is a hotsite: its own chrome (ro-* classes below) and its own
   palette, taken from the official Recicla Óleo lockup —
       dark green  #024F30   (wordmark "Recicla")
       orange      #F39200   (the drop, wordmark "Óleo")
       leaf green  #84BE58   (the leaves)
   Overriding the design-system variables on body.hotsite-recicla re-skins every
   shared component (buttons, sections, cards, map, carousel) in one place, so
   the institutional palette is never touched. Never recolor a logo — the marks
   are always the official artwork.
   ============================================================ */

body.hotsite-recicla {
    --green-900: #013A23;
    --green-700: #024F30;
    --green-600: #0B7A46;
    --green-100: #e3f1dc;
    --green-50:  #f4faf0;
    --yellow:    #F39200;   /* the sub-brand accent is the drop orange */
    --leaf:      #84BE58;
    --bg:        #f8fbf4;
    --border:    #e5efdd;
    --muted:     #5a6d55;
    --shadow:    0 10px 30px rgba(2, 79, 48, .08);
    --shadow-lg: 0 24px 60px rgba(2, 79, 48, .18);
}

/* Anchors must clear the sticky hotsite header */
.hotsite-recicla section[id] { scroll-margin-top: 88px; }

.ro-skip {
    position: absolute; left: -9999px; top: 0; z-index: 1000;
    background: var(--yellow); color: var(--green-900); font-weight: 800;
    padding: 12px 18px; border-radius: 0 0 10px 0; text-decoration: none;
}
.ro-skip:focus { left: 0; }

/* ---------------- Hotsite topbar ---------------- */
.ro-topbar { background: var(--green-900); color: #cfe3c4; font-size: 12.5px; }
.ro-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 36px; flex-wrap: wrap; }
.ro-topbar-tagline { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: .02em; }
.ro-topbar-tagline .icon { color: var(--leaf); }
.ro-topbar-right { display: flex; align-items: center; gap: 14px; }
.ro-lang a { color: #b9d3ac; }
.ro-portal-link {
    color: #fff; text-decoration: none; font-weight: 700; display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); transition: background .15s, border-color .15s;
}
.ro-portal-link:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }

/* ---------------- Hotsite header ---------------- */
.ro-header {
    background: #fff; position: sticky; top: 0; z-index: 500;
    border-bottom: 3px solid var(--leaf); transition: box-shadow .25s;
}
.ro-header.scrolled { box-shadow: 0 10px 30px rgba(2, 79, 48, .14); }
.ro-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 78px; }
.ro-logo { display: block; line-height: 0; }
.ro-logo img { width: 260px; height: auto; display: block; }

.ro-nav { display: flex; align-items: center; gap: 2px; }
.ro-nav > a {
    color: var(--green-700); text-decoration: none; font-weight: 700; font-size: 13.5px;
    padding: 8px 10px; border-radius: 999px; white-space: nowrap;
    transition: background .15s, color .15s;
}
.ro-nav > a:hover { background: var(--green-50); color: var(--green-600); }
.ro-nav > a.active { background: var(--green-100); color: var(--green-700); }
.ro-nav > a.ro-nav-cta {
    background: var(--yellow); color: var(--green-900); margin-left: 10px;
    display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px;
}
.ro-nav > a.ro-nav-cta:hover { background: #d97f00; color: #fff; }

.ro-menu-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.ro-menu-toggle span { display: block; width: 24px; height: 3px; background: var(--green-700); margin: 5px 0; border-radius: 2px; }

/* Seven section links + the CTA only fit next to the 260 px lockup at the
   container's full width — below that the panel takes over. */
@media (max-width: 1179px) {
    .ro-header-inner { min-height: 68px; }
    .ro-menu-toggle { display: block; }
    .ro-logo img { width: 200px; }
    /* Positioned against .ro-header (sticky ⇒ containing block), so left/right 0
       spans the viewport instead of the container's content box. */
    .ro-nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff;
        flex-direction: column; align-items: stretch; padding: 10px 22px 18px; gap: 2px;
        box-shadow: 0 24px 40px rgba(2,79,48,.18); border-top: 1px solid var(--border);
    }
    .ro-nav.open { display: flex; }
    .ro-nav > a { border-radius: 10px; padding: 12px 12px; font-size: 15px; }
    .ro-nav > a.ro-nav-cta { margin: 10px 0 0; justify-content: center; }
}

/* ---------------- Hotsite hero ---------------- */
.ro-hero {
    position: relative; overflow: hidden; color: #fff;
    background: radial-gradient(120% 120% at 82% 8%, #0b7a46 0%, #024F30 46%, #013A23 100%);
}
/* Oil-drop echo of the mark, kept subtle and behind the text */
.ro-hero::before {
    content: ""; position: absolute; right: -6%; top: -18%; width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(243,146,0,.30), transparent 70%);
}
.ro-hero::after {
    content: ""; position: absolute; left: -12%; bottom: -34%; width: 460px; height: 460px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(132,190,88,.24), transparent 72%);
}
.ro-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; gap: 46px; align-items: center; padding: 32px 0 42px; }
/* Text is a lighter tint of the drop orange: #F39200 itself only reaches 4.3:1
   over the hero green, and 12.5 px bold does not qualify as large text. */
.ro-hero-badge {
    display: inline-flex; align-items: center; gap: 8px; background: rgba(243,146,0,.16); color: #FFB84D;
    font-weight: 800; font-size: 12.5px; letter-spacing: .04em; padding: 7px 14px; border-radius: 999px; margin-bottom: 18px;
}
.ro-hero h1 { font-size: clamp(31px, 4.6vw, 52px); font-weight: 900; line-height: 1.09; }
.ro-hero h1 em { font-style: normal; color: var(--yellow); }
.ro-hero p.ro-hero-lead { margin: 20px 0 28px; color: #d8ecca; font-size: 18px; max-width: 560px; }
.ro-hero .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.ro-hero-media { display: flex; flex-direction: column; align-items: center; }
.ro-hero-media .short-video { max-width: 360px; }

/* Realização / Parceria strip inside the hero (white Petrobras "negativa" over
   the brand dark green, >= 100 px wide, clear space around it) */
.ro-hero-partners { display: flex; align-items: center; gap: 22px; margin-top: 34px; flex-wrap: wrap; }
.ro-hero-partners .ro-partner-label { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #a8c79a; }
.ro-hero-partners img { width: 150px; min-width: 100px; height: auto; display: block; }
.ro-hero-partners .ro-partner-adenor { width: 130px; }

@media (max-width: 900px) {
    .ro-hero-inner { grid-template-columns: 1fr; padding: 28px 0 30px; gap: 26px; }
    .ro-hero-media { order: -1; }
    .ro-hero-media .short-video { max-width: 290px; }
}

/* ---------------- Impact band ---------------- */
/* Orange numerals need the darkest green behind them, not --green-600 */
.hotsite-recicla .stat-band { background: var(--green-900); border-top: 3px solid var(--yellow); }
.hotsite-recicla .stat-band span { color: #d8ecca; }

/* ---------------- How-it-works flow (project cycle) ---------------- */
.ro-cycle { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .ro-cycle { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ro-cycle { grid-template-columns: 1fr; } }
.ro-cycle-step {
    background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 26px 22px; position: relative;
}
.ro-cycle-step .ro-cycle-pic {
    width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
    background: var(--green-50); color: var(--green-600); margin-bottom: 14px;
}
.ro-cycle-step:nth-child(2) .ro-cycle-pic { background: #fdf0dd; color: #c97a00; }
.ro-cycle-step:nth-child(3) .ro-cycle-pic { background: #eef7e4; color: #4f8a26; }
.ro-cycle-step h3 { color: var(--green-900); font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.ro-cycle-step p { color: var(--muted); font-size: 14.5px; }
/* --leaf on white is 2.2:1 — the step ordinal carries meaning, so it uses the
   readable green instead. */
.ro-cycle-step .ro-cycle-num {
    position: absolute; right: 18px; top: 16px; font-weight: 900; font-size: 13px;
    color: var(--green-600); letter-spacing: .1em;
}

/* ---------------- FAQ ---------------- */
.ro-faq { display: grid; gap: 12px; max-width: 840px; }
.ro-faq details {
    background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 4px 20px;
    transition: box-shadow .2s, border-color .2s;
}
.ro-faq details[open] { border-color: var(--leaf); box-shadow: var(--shadow); }
.ro-faq summary {
    cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px;
    padding: 16px 0; font-weight: 800; color: var(--green-900); font-size: 16px;
}
.ro-faq summary::-webkit-details-marker { display: none; }
.ro-faq summary .icon { color: var(--yellow); flex-shrink: 0; transition: transform .2s; }
.ro-faq details[open] summary .icon { transform: rotate(180deg); }
.ro-faq summary span { flex: 1; }
.ro-faq details > p { color: var(--muted); font-size: 15px; padding: 0 0 18px 30px; max-width: 68ch; }

/* ---------------- Contact / closing CTA ---------------- */
.ro-contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px; align-items: stretch; }
@media (max-width: 820px) { .ro-contact-grid { grid-template-columns: 1fr; } }
.ro-contact-card {
    background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: clamp(26px, 4vw, 38px);
    box-shadow: var(--shadow);
}
.ro-contact-card h3 { color: var(--green-900); font-size: 20px; font-weight: 800; margin-bottom: 10px; }
.ro-contact-card p { color: var(--muted); font-size: 15.5px; margin-bottom: 20px; }
.ro-contact-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.ro-contact-list a, .ro-contact-list span { color: var(--green-700); text-decoration: none; font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 10px; }
.ro-contact-list a:hover { color: var(--green-600); text-decoration: underline; }
.ro-contact-list .icon { color: var(--yellow); }
/* The shared CTA band is built for a full-width row; in this column it needs to
   stack and lose some of its 52 px padding. */
.ro-contact-grid .cta-band { padding: clamp(28px, 4vw, 40px); flex-direction: column; align-items: flex-start; gap: 22px; }
.ro-contact-grid .cta-band h2 { font-size: clamp(22px, 2.6vw, 28px); }

/* ---------------- Hotsite footer ---------------- */
.ro-footer { background: var(--green-900); color: #cfe3c4; }
.ro-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 44px; padding: 60px 22px 48px; }
@media (max-width: 960px) { .ro-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ro-footer-grid { grid-template-columns: 1fr; padding: 44px 20px 36px; } }
.ro-footer-logo { width: 250px; max-width: 100%; height: auto; background: #fff; padding: 12px 16px; border-radius: 14px; margin-bottom: 18px; }
.ro-footer-about p { font-size: 14.5px; max-width: 330px; }
.ro-footer-social { display: flex; gap: 10px; margin-top: 18px; }
/* .ro-footer-col prefix: outranks the generic `.ro-footer-col a` inline-flex rule below */
.ro-footer-col .ro-footer-social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; gap: 0; color: #fff; transition: background .15s; }
.ro-footer-col .ro-footer-social a:hover { background: var(--yellow); color: var(--green-900); }
.ro-footer-social a svg { display: block; vertical-align: 0; }
.ro-footer-col h3 { color: #fff; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px; }
.ro-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ro-footer-col a, .ro-footer-col span { color: #cfe3c4; text-decoration: none; font-size: 14.5px; display: inline-flex; align-items: center; gap: 8px; }
.ro-footer-col a:hover { color: var(--yellow); }
.ro-footer-col a.btn-whatsapp { color: #06341c; margin-top: 18px; }
.ro-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 18px 0; font-size: 13px; color: #a8c79a; }

/* ---------------- Project partners strip (#parceria) ----------------
   Horizontal scroll-snap track: with few logos it centers; once partners
   outgrow the row it scrolls sideways, so new logos never break the layout.
   Chips stay white — the colored Petrobras mark (and most partner marks)
   require a white background. */
.ro-partners { margin-top: 46px; text-align: center; }
.ro-partners-title { color: var(--green-900); font-size: 22px; font-weight: 900; }
.ro-partners-sub { color: var(--muted); font-size: 15px; margin: 8px auto 24px; max-width: 520px; }
/* Logo carousel: two copies of the track slide left continuously; pauses on hover/focus */
.ro-partners-marquee { display: flex; overflow: hidden; padding: 4px 0 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ro-partners-track { display: flex; flex: 0 0 auto; gap: 18px; padding-right: 18px; animation: ro-marquee 42s linear infinite; }
.ro-partners-marquee:hover .ro-partners-track, .ro-partners-marquee:focus-within .ro-partners-track { animation-play-state: paused; }
@keyframes ro-marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
    .ro-partners-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .ro-partners-track { animation: none; }
    .ro-partners-track[aria-hidden] { display: none; }
}
.ro-partner-chip { flex: 0 0 auto; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 18px 28px; display: grid; place-items: center; min-width: 200px; height: 118px; }
.ro-partner-chip img { max-width: 180px; max-height: 78px; width: auto; height: auto; }