/* =========================================================
   RESET E CONFIGURAÇÕES BASE — ARQUITETO EM CONSTRUÇÃO
   Paleta aplicada:
   - Fundo principal: #DACCC2 (areia suave)
   - Neutro secundário: #EAE4DD (cinza areia)
   - Texto: #2B2B2B (grafite quente)
   - Apoio: #6C6048 (marrom acinzentado)
   - Destaques/CTAs: #B16642 (terracota sofisticado)
   - Detalhes/hover: #3C4A4E (azul petróleo)
   ========================================================= */

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  line-height: 1.6;
  color: var(--text-dark);
  background: var(--bg);
  overflow-x: hidden;
}

/* -----------------------------
   VARIÁVEIS (PALETA COMPLETA)
   ----------------------------- */
:root{
  /* Fundos (areia) */
  --bg: #DACCC2;        /* Fundo principal — Areia suave */
  --bg-2: #EAE4DD;      /* Neutro secundário — Cinza areia */
  --card: #EAE4DD;      /* Cartões em cinza areia */
  --border: #D6C9BF;    /* Borda sutil entre bg e card */

  /* Texto (grafite quente) */
  --graphite-900: #2B2B2B;
  --graphite-700: #3A3A3A;
  --graphite-500: #6F6F6F;

  /* Terracota (apenas botões/destaques) */
  --terra-700: #B16642;
  --terra-600: #C17857;
  --terra-400: #D99D7C;
  --terra-200: #EBD0C1;

  /* Apoio e detalhes */
  --support-600: #6C6048;  /* Marrom acinzentado */
  --petroleo-800: #3C4A4E; /* Azul petróleo (títulos/detalhes) */
  --petroleo-700: #506066;

  /* Sombras e raios */
  --shadow-sm: 0 4px 12px rgba(0,0,0,.08);
  --shadow-md: 0 10px 24px rgba(0,0,0,.12);
  --radius: 14px;

  /* Mapeamento para nomes existentes */
  --primary-dark: var(--petroleo-800);   /* Títulos em azul petróleo */
  --primary-silver: var(--terra-700);    /* Mantido para "destaque" */
  --silver-light: var(--bg-2);
  --silver-dark: var(--support-600);
  --white: #ffffff;
  --text-light: #ffffff;
  --text-dark: var(--graphite-900);
  --shadow-light: rgba(0, 0, 0, 0.06);
  --shadow-dark: rgba(60, 74, 78, 0.25);

  /* Gradientes */
  --gradient-areia: linear-gradient(135deg, #DACCC2 0%, #EAE4DD 100%);
  --gradient-primary: linear-gradient(135deg, #B16642 0%, #8E5038 100%); /* Terracota (somente destaques/CTAs) */
  --gradient-silver: var(--gradient-areia); /* usaremos areia para seções */
}

/* Tipografia e container */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, Cambria, 'Times New Roman', Times, serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--primary-dark); /* azul petróleo */
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
section { position: relative; overflow: hidden; }
.section-header { text-align: center; margin-bottom: 4rem; }
.section-title { font-size: 2.5rem; margin-bottom: 1rem; color: var(--primary-dark); position: relative; }
.section-divider { width: 80px; height: 3px; background: var(--gradient-areia); margin: 0 auto; border-radius: 2px; }

/* HERO */
.hero {
  background: var(--gradient-areia); /* Fundo em areia (não terracota) */
  min-height: 100vh; display: flex; align-items: center; position: relative;
  color: var(--primary-dark);
}
.hero .container { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; z-index: 2; position: relative; }
.hero-content { animation: fadeInUp 1s ease-out; }
.hero-title { font-size: 4rem; margin-bottom: 1.5rem; line-height: 1.1; color: var(--primary-dark); }
.title-main { display: block; font-weight: 400; }
.title-highlight { display: block; color: var(--support-600); font-weight: 700; text-shadow: 0 0 22px rgba(108,96,72,.18); }
.hero-subtitle { font-size: 1.25rem; margin-bottom: 2.5rem; color: var(--graphite-700); max-width: 500px; line-height: 1.5; }

/* Visual hero */
/* .hero-visual { position: relative; height: 400px; display: flex; align-items: center; justify-content: center; }
.geometric-shape { position: absolute; border-radius: 20px; background: rgba(255,255,255,0.25); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.35); }
.shape-1 { width: 200px; height: 200px; top: 50px; right: 50px; animation: float 6s ease-in-out infinite; }
.shape-2 { width: 150px; height: 150px; bottom: 100px; left: 30px; animation: float 8s ease-in-out infinite reverse; }
.shape-3 { width: 100px; height: 100px; top: 150px; left: 150px; animation: float 10s ease-in-out infinite; } */
.hero-visual {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fotos */
.hero-photo {
    position: absolute;
    border-radius: 20px;
    width: 230px;
    height: 230px;
    object-fit: cover;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    border: 2px solid rgba(255,255,255,0.4);
    backdrop-filter: blur(5px);
    animation: float 6s ease-in-out infinite;
}

/* Foto 1 (substitui shape-1) */
.photo-1 {
    top: 40px;
    right: 40px;
    animation-duration: 7s;
}

/* Foto 2 (substitui shape-2) */
.photo-2 {
    bottom: 60px;
    left: 40px;
    width: 190px;
    height: 190px;
    animation-duration: 9s;
    animation-direction: reverse;
}

/* Animação */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-18px); }
    100% { transform: translateY(0px); }
}


/* CTAs */
.cta-button {
  display: inline-block; padding: 1rem 2.5rem; font-size: 1.1rem; font-weight: 600;
  text-decoration: none; border: none; border-radius: 999px; cursor: pointer; transition: all .25s ease;
  position: relative; overflow: hidden; text-transform: uppercase; letter-spacing: .8px;
}
.cta-button.primary{ background: var(--terra-700); color:#fff; border:1px solid color-mix(in oklab, var(--terra-700), #000 12%); box-shadow: var(--shadow-sm); }
.cta-button.primary:hover{ background: var(--terra-600); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cta-button.secondary{ background: transparent; color: var(--primary-dark); border: 2px solid var(--primary-dark); box-shadow: none; }
.cta-button.secondary:hover{ background: color-mix(in oklab, var(--primary-dark), #fff 90%); color: var(--primary-dark); transform: translateY(-2px); }
.cta-button:focus{ outline: 2px solid var(--terra-400); outline-offset: 2px; }

/* SOBRE */
.about, .about-autor { padding: 6rem 0; background: var(--bg); }
.about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.about-text { font-size: 1.1rem; line-height: 1.8; }
.about-description { margin-bottom: 1.5rem; color: var(--text-dark); }
.about-image { max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.about-highlights { display: flex; flex-direction: column; gap: 2rem; }
.highlight-item {
  display:flex; align-items:flex-start; gap:1rem; padding:1.5rem; background: var(--card);
  border-radius:15px; border:1px solid var(--border); box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s;
}
.highlight-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.highlight-icon { flex-shrink:0; width:50px; height:50px; background: var(--gradient-primary); border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; }
.highlight-item h3 { font-size: 1.2rem; margin-bottom: .5rem; color: var(--primary-dark); }
.highlight-item p { color: var(--text-dark); font-size: .95rem; }

/* BENEFÍCIOS */
.benefits { padding: 6rem 0; background: var(--gradient-areia); }
.benefits .section-title { color: var(--primary-dark); }
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; }
.benefit-card {
  background: var(--card); padding: 2.5rem; border-radius: 20px; text-align: center;
  border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(60,74,78,.08);
  transition: transform .25s, box-shadow .25s; position: relative; overflow: hidden;
}
.benefit-card::before { content: ''; position: absolute; top:0; left:0; right:0; height:4px; background: var(--gradient-primary); } /* destaque ok */
.benefit-card:hover { transform: translateY(-10px); box-shadow: 0 20px 50px rgba(60,74,78,.12); }
.benefit-icon { width:80px; height:80px; background: var(--gradient-primary); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem; color:#fff; }
.benefit-title { font-size: 1.4rem; margin-bottom: 1rem; color: var(--primary-dark); }
.benefit-description { color: var(--text-dark); line-height: 1.6; }

/* CTA FINAL */
.final-cta { padding: 6rem 0; background: var(--gradient-areia); text-align: center; }
.cta-content { max-width: 800px; margin: 0 auto; }
.cta-title { font-size: 3rem; margin-bottom: 1.5rem; color: var(--primary-dark); }
.cta-title .title-highlight { color: var(--primary-dark); text-shadow: none; }
.cta-description { font-size: 1.2rem; margin-bottom: 2.5rem; color: var(--text-dark); line-height: 1.6; }
.cta-benefits-summary { display:flex; justify-content:center; gap:2rem; margin-bottom:3rem; flex-wrap:wrap; }
.summary-item { display:flex; align-items:center; gap:.5rem; font-weight:500; color: var(--primary-dark); }
.summary-icon { color: var(--primary-dark); font-weight: bold; font-size: 1.2rem; }

/* FOOTER */
.footer { background: var(--gradient-areia); color: var(--primary-dark); padding: 3rem 0 1rem; }
.footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.footer-brand h3 { font-size: 1.5rem; margin-bottom: .5rem; color: var(--primary-dark); }
.footer-brand p, .footer-contact p { color: var(--graphite-700); margin-bottom: .5rem; }
.footer-contact h4, .footer-social h4 { font-size: 1.2rem; margin-bottom: 1rem; color: var(--primary-dark); }
.social-links { display: flex; gap: 1rem; }
.social-links a{
  width: 40px; height: 40px; background: color-mix(in oklab, var(--terra-200), #fff 60%);
  border: 1px solid var(--border); border-radius: 50%; display:flex; align-items:center; justify-content:center;
  color: var(--terra-700); transition: all .25s ease;
}
.social-links a:hover{ background: var(--terra-700); color:#fff; transform: translateY(-3px); }
.footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid rgba(0,0,0,0.08); color: var(--support-600); }

/* ANIMAÇÕES */
@keyframes fadeInUp { from { opacity:0; transform: translateY(30px); } to { opacity:1; transform: translateY(0); } }
@keyframes float { 0%,100%{ transform: translateY(0) rotate(0); } 50%{ transform: translateY(-20px) rotate(5deg); } }

/* RESPONSIVO */
@media (max-width: 1024px) {
  .hero .container { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .hero-visual { height: 300px; }
  .about-content { grid-template-columns: 1fr; gap: 3rem; }
  .benefits-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
@media (max-width: 768px) {
  .container { padding: 0 15px; }
  .hero-title { font-size: 3rem; }
  .section-title { font-size: 2rem; }
  .cta-title { font-size: 2.2rem; }
  .hero-subtitle, .cta-description { font-size: 1.1rem; }
  .benefits-grid { grid-template-columns: 1fr; }
  .benefit-card { padding: 2rem; }
  .cta-benefits-summary { flex-direction: column; align-items: center; gap: 1rem; }
  .highlight-item { flex-direction: column; text-align: center; }
  .footer-content { grid-template-columns: 1fr; text-align: center; }
}
@media (max-width: 480px) {
  .hero { padding: 2rem 0; }
  .hero-title { font-size: 2.5rem; }
  .section-title, .cta-title { font-size: 1.8rem; }
  .cta-button { padding: .8rem 2rem; font-size: 1rem; }
  .benefit-card { padding: 1.5rem; }
  .benefit-icon { width: 60px; height: 60px; }
  section { padding: 4rem 0; }
}

/* UTILITÁRIOS HOVER */
.fade-in{ opacity:0; transform: translateY(30px); transition: all .6s ease; }
.fade-in.visible{ opacity:1; transform: translateY(0); }
.highlight-item:hover .highlight-icon { transform: scale(1.06); }
.benefit-card:hover .benefit-icon { transform: scale(1.06) rotate(3deg); }

/* BADGE/TAG/PILL */
.badge, .pill, .tag{
  display:inline-flex; align-items:center; gap:6px; padding:.35rem .7rem; font-size:.85rem; font-weight:600;
  background: var(--terra-200); color: var(--terra-700);
  border: 1px solid color-mix(in oklab, var(--terra-200), #000 8%); border-radius: 999px;
}

/* ===========================
   TEMA ALTERNATIVO (PETRÓLEO)
   Use em um wrapper: <div class="theme-alt"> ...
   =========================== */
.theme-alt{
  --primary-dark: var(--petroleo-800);
  --primary-silver: var(--petroleo-700);
  --text-dark: var(--graphite-900);
  --gradient-areia: linear-gradient(135deg, #EAE4DD 0%, #DACCC2 100%);
}
.theme-alt .cta-button.primary{ background: var(--primary-silver); border-color: color-mix(in oklab, var(--primary-silver), #000 12%); color:#fff; }
.theme-alt .social-links a{ color: var(--primary-silver); background: color-mix(in oklab, var(--silver-light), #fff 60%); }
.theme-alt .social-links a:hover{ background: var(--primary-silver); color: #fff; }

/* ===========================
   ACESSIBILIDADE & REDUÇÃO DE MOV.
   =========================== */
:focus-visible{ outline: 3px solid var(--terra-400); outline-offset: 2px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}