/* docs-page.css — landing-docs do Registro Rural.
   Padrão: hero compacto + animação + how-to + CTA real.
   Tokens reaproveitam detail-page.css quando faz sentido (cores, spacing).
   ---------------------------------------------------------------- */

:root {
    --docs-bg: #fff;
    --docs-text: #1a1a1a;
    --docs-text-strong: #111827;
    --docs-text-muted: #6b7280;
    --docs-text-subtle: #9ca3af;
    --docs-border: #e5e7eb;
    --docs-border-soft: #f1f3f5;
    --docs-bg-soft: #fafafa;
    --docs-radius: 14px;
    --docs-radius-sm: 10px;
    --docs-accent: #111827;
}

.docs-canvas {
    width: 100%;
    padding: 24px 0 64px;
    color: var(--docs-text);
}

/* ========== Breadcrumb ========== */
.docs-breadcrumb { margin-bottom: 32px; }
.docs-breadcrumb__list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: .82rem; color: var(--docs-text-subtle);
}
.docs-breadcrumb__list a { color: var(--docs-text-muted); text-decoration: none; }
.docs-breadcrumb__list a:hover { color: var(--docs-text); text-decoration: underline; }
.docs-breadcrumb__sep { color: var(--docs-text-subtle); }
.docs-breadcrumb__current { color: var(--docs-text-strong); font-weight: 500; }

/* ========== Hero ========== */
.docs-hero {
    max-width: 760px;
    margin: 0 0 32px;
}
.docs-hero__eyebrow {
    font-size: .72rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--docs-text-subtle);
    margin: 0 0 10px;
}
.docs-hero__title {
    font-size: 2.2rem; font-weight: 800; line-height: 1.1;
    color: var(--docs-text-strong);
    margin: 0 0 12px;
    letter-spacing: -.02em;
}
.docs-hero__lead {
    font-size: .98rem; line-height: 1.5;
    color: var(--docs-text-muted);
    margin: 0 0 20px;
    max-width: 640px;
}
.docs-hero__cta-row {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.docs-hero__cta-row .btn { border-radius: 999px; font-weight: 600; }
.docs-hero__cta-row .btn-icon-only {
    width: 38px; height: 38px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--docs-border); color: var(--docs-text);
    border-radius: 50%;
}
.docs-hero__cta-row .btn-icon-only:hover { background: var(--docs-bg-soft); border-color: var(--docs-text-subtle); color: var(--docs-text-strong); }

/* ========== Container genérico de animação ==========
   Largura cheia do container, com aspect ratio confortável. */
.docs-anim {
    position: relative;
    background: linear-gradient(180deg, #fafafa 0%, #fff 100%);
    border: 1px solid var(--docs-border);
    border-radius: var(--docs-radius);
    aspect-ratio: 16/8;
    width: 100%;
    margin: 0 0 32px;
    overflow: hidden;
    padding: 0;          /* SVG ocupa 100%, sem padding interno */
}
.docs-anim__svg { width: 100%; height: 100%; display: block; }

/* Callout: caixinha com bullet + texto explicativo posicionada por cima
   da animação. Substitui o subtítulo/lead que antes era texto solto fora
   do quadro — agora a explicação vive dentro da animação, narrando o que
   o usuário está vendo. */
.docs-anim__callout {
    position: absolute;
    background: #fff;
    border: 1px solid var(--docs-border);
    border-radius: 999px;
    padding: 6px 14px 6px 12px;
    font-size: .78rem;
    font-weight: 500;
    color: var(--docs-text);
    box-shadow: 0 4px 12px rgba(17, 24, 39, .06);
    display: inline-flex; align-items: center; gap: 8px;
    white-space: nowrap;
    line-height: 1.3;
    pointer-events: none;
}
.docs-anim__callout strong { color: var(--docs-text-strong); font-weight: 700; }
.docs-anim__callout::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: #6b7280; flex-shrink: 0;
}
.docs-anim__callout--green::before  { background: #16a34a; }
.docs-anim__callout--amber::before  { background: #d97706; }
.docs-anim__callout--red::before    { background: #dc2626; }
.docs-anim__callout--blue::before   { background: #1d4ed8; }
.docs-anim__callout--purple::before { background: #7c3aed; }

/* Posições absolutas pras callouts (top-left, top-right, etc.). */
.docs-anim__callout--tl { top: 14px; left: 14px; }
.docs-anim__callout--tr { top: 14px; right: 14px; }
.docs-anim__callout--bl { bottom: 14px; left: 14px; }
.docs-anim__callout--br { bottom: 14px; right: 14px; }
.docs-anim__callout--bc { bottom: 14px; left: 50%; transform: translateX(-50%); }

@media (max-width: 575.98px) {
    .docs-anim { aspect-ratio: 4/3; padding: 16px 16px 56px; }
    .docs-anim__callout { font-size: .7rem; padding: 4px 10px; }
}

/* ========== Empty state (placeholder antes da landing real) ========== */
.docs-empty-state {
    background: var(--docs-bg-soft);
    border: 1px dashed var(--docs-border);
    border-radius: var(--docs-radius);
    padding: 48px 32px;
    text-align: center;
    margin-top: 32px;
}
.docs-empty-state i {
    font-size: 2rem;
    color: var(--docs-text-subtle);
    margin-bottom: 16px;
}
.docs-empty-state h2 {
    font-size: 1.2rem; font-weight: 700; color: var(--docs-text-strong);
    margin: 0 0 8px;
}
.docs-empty-state p {
    font-size: .95rem; color: var(--docs-text-muted);
    max-width: 540px; margin: 0 auto;
    line-height: 1.55;
}

/* ========== Sections (usado pelas landings reais nas fases 2/3) ========== */
.docs-section {
    margin: 64px 0;
}
.docs-section__title {
    font-size: 1.6rem; font-weight: 700; color: var(--docs-text-strong);
    margin: 0 0 8px;
    letter-spacing: -.01em;
}
.docs-section__lead {
    font-size: 1rem; color: var(--docs-text-muted);
    max-width: 640px; line-height: 1.55;
    margin: 0 0 28px;
}

/* Steps numerados */
.docs-steps { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 768px) {
    .docs-steps--3 { grid-template-columns: repeat(3, 1fr); }
}
.docs-step {
    background: #fff;
    border: 1px solid var(--docs-border);
    border-radius: var(--docs-radius-sm);
    padding: 24px;
    position: relative;
}
.docs-step__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--docs-accent); color: #fff;
    font-weight: 700; font-size: .85rem;
    margin-bottom: 12px;
}
.docs-step__title {
    font-size: 1rem; font-weight: 700; color: var(--docs-text-strong);
    margin: 0 0 6px;
}
.docs-step__desc {
    font-size: .9rem; color: var(--docs-text-muted); line-height: 1.55;
    margin: 0;
}

/* Final CTA */
.docs-cta-block {
    background: linear-gradient(180deg, #fafafa 0%, #fff 100%);
    border: 1px solid var(--docs-border);
    border-radius: var(--docs-radius);
    padding: 48px 32px;
    text-align: center;
    margin-top: 48px;
}
.docs-cta-block h2 {
    font-size: 1.4rem; font-weight: 700; color: var(--docs-text-strong);
    margin: 0 0 8px;
}
.docs-cta-block p {
    font-size: .95rem; color: var(--docs-text-muted);
    max-width: 560px; margin: 0 auto 24px; line-height: 1.55;
}
.docs-cta-block .btn { border-radius: 999px; font-weight: 600; padding: 10px 28px; }

@media (max-width: 575.98px) {
    .docs-hero__title { font-size: 1.7rem; }
    .docs-hero__lead { font-size: 1rem; }
    .docs-empty-state { padding: 32px 20px; }
}