@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* Add Time — Design Tokens (identidade "Chevron": marinho #10294F + coral #F2683C) */

:root {
  /* Brand — marinho institucional + coral acento (Manual da Marca v1.0) */
  --at-primary: #10294F;       /* marinho */
  --at-primary-90: #dbe3f0;
  --at-primary-80: #b3c1d8;
  --at-on-primary: #ffffff;

  --at-secondary: #F2683C;     /* coral (acento ≈10%) */
  --at-secondary-90: #FCE7DF;
  --at-secondary-80: #F8B7A0;
  --at-on-secondary: #ffffff;

  --at-tertiary: #0B1E3A;
  --at-on-tertiary: #ffffff;

  /* Surfaces */
  --at-surface: #f7f9fb;
  --at-surface-container: #ffffff;
  --at-surface-container-low: #f0f4f8;
  --at-surface-container-high: #e6ecf2;
  --at-on-surface: #1b2025;
  --at-on-surface-variant: #43474e;

  /* Outlines */
  --at-outline: #74787f;
  --at-outline-variant: #c4c7cf;

  /* States */
  --at-success: #2e7d32;
  --at-success-bg: #e8f5e9;
  --at-warning: #ed6c02;
  --at-warning-bg: #fff4e5;
  --at-error: #c62828;
  --at-error-bg: #ffebee;
  --at-info: #0288d1;
  --at-info-bg: #e1f5fe;

  /* Status badges (configurador) */
  --at-status-incluso: #2e7d32;
  --at-status-incluso-bg: #e8f5e9;
  --at-status-opcional: #0288d1;
  --at-status-opcional-bg: #e1f5fe;
  --at-status-recomendado: #ed6c02;
  --at-status-recomendado-bg: #fff4e5;
  --at-status-consulta: #6a1b9a;
  --at-status-consulta-bg: #f3e5f5;
  --at-status-indisponivel: #757575;
  --at-status-indisponivel-bg: #eeeeee;

  /* Type scale — Poppins (títulos) + Plus Jakarta Sans (corpo) */
  --at-font-sans: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --at-font-display: 'Poppins', 'Inter', sans-serif;
  --at-font-icon: 'Material Symbols Outlined';

  /* Radius */
  --at-radius-sm: 6px;
  --at-radius-md: 12px;
  --at-radius-lg: 20px;
  --at-radius-xl: 28px;

  /* Shadows */
  --at-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --at-shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --at-shadow-lg: 0 10px 30px rgba(16,41,79,0.14), 0 4px 8px rgba(0,0,0,0.06);

  /* Spacing scale */
  --at-z-nav: 50;
  --at-z-modal: 100;
  --at-z-drawer: 90;
  --at-z-toast: 110;
}

/* Base */
html { scroll-behavior: smooth; }
body {
  font-family: var(--at-font-sans);
  color: var(--at-on-surface);
  background: var(--at-surface);
  -webkit-font-smoothing: antialiased;
}

/* Identidade Chevron — força as fontes da marca mesmo onde a página tem
   `<style>body{font-family:'Inter'}` inline (reskin global, sem editar páginas).
   Títulos em Poppins; corpo em Plus Jakarta Sans. */
body { font-family: var(--at-font-sans) !important; }
h1, h2, h3, h4, h5, .font-display, .font-black, .font-extrabold {
  font-family: var(--at-font-display) !important;
}

.material-symbols-outlined {
  font-family: var(--at-font-icon);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* Components */
.glass-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(196, 199, 207, 0.3);
  border-radius: var(--at-radius-lg);
}

.hero-gradient {
  background:
    radial-gradient(ellipse at top left, rgba(16,41,79,0.12), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(16,41,79,0.08), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, var(--at-surface) 100%);
}

.btn-primary {
  background: var(--at-primary);
  color: var(--at-on-primary);
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.15s, transform 0.15s;
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }

.btn-secondary {
  background: var(--at-surface-container);
  color: var(--at-primary);
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid var(--at-outline-variant);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
}
.btn-secondary:hover { background: var(--at-surface-container-high); }

.btn-tonal {
  background: var(--at-secondary-90);
  color: var(--at-secondary);
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Status badges */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-incluso { background: var(--at-status-incluso-bg); color: var(--at-status-incluso); }
.badge-opcional { background: var(--at-status-opcional-bg); color: var(--at-status-opcional); }
.badge-recomendado { background: var(--at-status-recomendado-bg); color: var(--at-status-recomendado); }
.badge-consulta { background: var(--at-status-consulta-bg); color: var(--at-status-consulta); }
.badge-indisponivel { background: var(--at-status-indisponivel-bg); color: var(--at-status-indisponivel); }
.badge-categoria { background: var(--at-primary-90); color: var(--at-primary); }
.badge-destaque { background: var(--at-warning); color: #ffffff; }

/* Configurator option card */
.opt-card {
  border: 1px solid var(--at-outline-variant);
  border-radius: var(--at-radius-md);
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  background: var(--at-surface-container);
}
.opt-card:hover { border-color: var(--at-secondary); box-shadow: var(--at-shadow-sm); }
.opt-card.selected { border-color: var(--at-primary); box-shadow: 0 0 0 2px var(--at-primary) inset; }
.opt-card[data-status="indisponivel"] { opacity: 0.5; cursor: not-allowed; }

/* Sticky summary panel */
.summary-panel {
  position: sticky;
  top: 88px;
  background: var(--at-surface-container);
  border: 1px solid var(--at-outline-variant);
  border-radius: var(--at-radius-lg);
  padding: 24px;
  box-shadow: var(--at-shadow-md);
}

/* Drawer institucional */
.inst-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(720px, 95vw);
  height: 100vh;
  background: var(--at-surface-container);
  box-shadow: var(--at-shadow-lg);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: var(--at-z-drawer);
  overflow-y: auto;
}
.inst-drawer.open { transform: translateX(0); }
.inst-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(4,22,39,0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
  z-index: calc(var(--at-z-drawer) - 1);
}
.inst-drawer-backdrop.open { opacity: 1; pointer-events: auto; }

/* Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn 0.4s ease-out both; }

/* Container */
.container-at { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1280px) { .container-at { padding: 0 32px; } }

/* Grafismo de marca "Chevron Motion" — textura opcional p/ blocos marinho.
   Uso: <div class="at-chev"></div> dentro de um container position:relative;overflow:hidden. */
.at-chev{position:absolute;inset:0;opacity:.06;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34' viewBox='0 0 60 34'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 8l9 9-9 9'/%3E%3Cpath d='M26 8l9 9-9 9'/%3E%3Cpath d='M44 8l9 9-9 9'/%3E%3C/g%3E%3C/svg%3E")}
@media (prefers-reduced-motion: no-preference){
  .at-chev.drift{animation:at-chev-drift 3.6s linear infinite}
  @keyframes at-chev-drift{from{background-position:0 0}to{background-position:60px 0}}
}

/* ===== Movimento da marca (skill designer-addtime) — "avançar sempre adiante" ===== */
:root{
  --at-ease: cubic-bezier(.22,.61,.36,1);  /* curva fast-forward */
  --at-dur-1: .15s;   /* micro-interação */
  --at-dur-2: .28s;   /* componente */
  --at-dur-3: .6s;    /* reveal */
}
/* Reveal on scroll: kicker→título→cards sobem ao entrar na viewport.
   Estado inicial só quando há JS (.js no <html>) — sem JS, conteúdo visível. */
.js .reveal{opacity:0;transform:translateY(22px);
  transition:opacity var(--at-dur-3) var(--at-ease), transform var(--at-dur-3) var(--at-ease);}
.js .reveal.d1{transition-delay:.08s}
.js .reveal.d2{transition-delay:.16s}
.js .reveal.d3{transition-delay:.24s}
.reveal.in{opacity:1;transform:none;}
/* Seta que avança: o ícone desliza p/ a direita no hover do link/CTA */
.lnk-arrow .material-symbols-outlined{transition:transform var(--at-dur-2) var(--at-ease);}
.lnk-arrow:hover .material-symbols-outlined{transform:translateX(4px);}
/* Press: botão afunda levemente ao clicar */
.btn-primary:active{transform:translateY(1px);}

/* Acessibilidade: respeita prefers-reduced-motion (a skill exige) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .reveal{opacity:1!important;transform:none!important;}
}

/* Responsividade mobile — rede de segurança contra overflow horizontal.
   Controles de formulário têm largura intrínseca (~size) que estoura grids/flex
   com min-width:auto. Mídia pode ultrapassar o container. Ambos zerados aqui. */
input, select, textarea { min-width: 0; }
img, svg, video, canvas { max-width: 100%; }
/* Títulos longos não devem estourar a largura no celular: quebra a palavra só
   como último recurso (sem efeito quando o texto já cabe). */
.text-h1, .text-h2, .text-h3 { overflow-wrap: break-word; }
/* text-h1 é 48px fixo — grande demais para telas pequenas (uma palavra longa
   ocupa a tela toda). Escala suave até 640px. */
@media (max-width: 640px){
  .text-h1 { font-size: clamp(30px, 8vw, 42px); }
}