/* ==========================================================================
   Randan — Site Institucional
   Shared stylesheet for all pages (index, necessidade, cadastro, valores, apps).

   The page markup keeps the design prototype's inline styles as the literal
   pixel spec. This file carries only what is genuinely shared: the reset,
   the type helpers, the carousel chrome, an on-brand hero placeholder, and a
   purely additive responsive layer (it never changes the desktop layout —
   the media queries only collapse multi-column grids on smaller screens).
   ========================================================================== */

:root {
  /* Brand — petróleo (teal) + âmbar (amber) */
  --teal:      #0F6E66;  /* primary */
  --teal-dark: #0A4F49;
  --teal-light:#13837A;  /* gradient start */
  --ink:       #102420;  /* near-black green — dark sections / footer */

  --amber: #E1922B;      /* logo amber */
  --gold:  #F2C45A;      /* accent on dark */
  --orange:#EE7A1E;

  --green:      #1E8E5A; /* success */
  --green-dark: #15724A;

  --rust: #C2540F;       /* "o problema" / app tradicional */

  --text:  #19261F;
  --muted: #566860;
  --sand:  #E7E4DD;      /* warm section background */

  --maxw: 1180px;
}

/* Reset + base type — carried over verbatim from the prototype <style> blocks */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Chakra Petch display helpers */
.wm  { font-family: 'Chakra Petch', sans-serif; font-weight: 700; text-transform: uppercase; line-height: 1; }
.tag { font-family: 'Chakra Petch', sans-serif; font-weight: 600; text-transform: uppercase; }

a { text-decoration: none; color: inherit; }

/* Carousel track — hide scrollbar (the apps strip on index + apps pages) */
#appcar { scrollbar-width: none; }
#appcar::-webkit-scrollbar { display: none; }

/* --------------------------------------------------------------------------
   Hero photo placeholder (index)
   The design used a user-fillable <image-slot> for a rider photo that was
   never filled. This renders an intentional, on-brand panel in its place.
   Swap the inner markup for an <img> when a real cooperado photo is ready.
   -------------------------------------------------------------------------- */
.hero-photo {
  width: 300px;
  height: 340px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(242,196,90,.14), transparent 60%),
    rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 24px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(2px);
  position: relative;
  overflow: hidden;
}
.hero-photo__mark {
  width: 84px; height: 84px;
  border-radius: 22px;
  background: var(--teal);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(10,79,73,.45);
}
.hero-photo__caption {
  font-size: 13px;
  color: rgba(255,255,255,.72);
  letter-spacing: .2px;
}

/* --------------------------------------------------------------------------
   Form fields (contact form on cadastro.html)
   ::placeholder and :focus can't be expressed inline, so the editable inputs
   live here. The box matches the prototype's mock-field styling exactly.
   -------------------------------------------------------------------------- */
.field {
  width: 100%;
  height: 46px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  padding: 0 13px;
  font: 14px/1.2 'Inter', system-ui, sans-serif;
  color: #fff;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field::placeholder { color: rgba(255,255,255,.45); }
.field:focus {
  outline: none;
  border-color: #F2C45A;
  background: rgba(255,255,255,.10);
  box-shadow: 0 0 0 3px rgba(242,196,90,.18);
}
.field[type=number] { -moz-appearance: textfield; }

/* --------------------------------------------------------------------------
   Responsive layer — ADDITIVE ONLY.
   The grid wrappers keep their inline `grid-template-columns`; these rules
   override them on narrow viewports (inline styles win specificity, so the
   layout-only overrides use !important by necessity). Desktop is untouched.
   Hook classes: r-split / r-2 / r-3 / r-4 / r-foot / navlinks
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .r-split,
  .r-2      { grid-template-columns: 1fr !important; }
  .r-3,
  .r-4,
  .r-foot   { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 640px) {
  .navlinks { display: none !important; }       /* keep brand + CTA in the bar */
  .r-3,
  .r-4      { grid-template-columns: 1fr !important; }
  .r-foot   { grid-template-columns: 1fr 1fr !important; }

  /* Scale down the big section headings so they don't overflow on phones.
     Only section h1/h2 use these sizes — the phone mockups use h3. */
  h1 { font-size: 34px !important; line-height: 1.08 !important; }
  h2 { font-size: 27px !important; }
}

@media (max-width: 460px) {
  .r-foot { grid-template-columns: 1fr !important; }
}