/* Pagina publica de rastreio do mel (/rastreio-mel). Assenta no publico.css
   (marca verde, fundo claro, pilulas) e junta o tom do mel: o dourado do
   logotipo e um favo discreto no cabecalho do lote. */
:root {
    --mel: #d4a73c;
    --mel-escuro: #a8771a;
    --mel-claro: #fbf3dc;
    --mel-linha: #f0e2b6;
}

.publico-main { padding-top: .5rem; }

.rp {
    width: 100%;
    max-width: 920px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.rp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- idioma ---- */
.rp-idioma {
    display: inline-flex;
    gap: .2rem;
    padding: .2rem;
    border: 1px solid #e3e0d6;
    border-radius: 999px;
    background: #fff;
}

.rp-idioma a {
    min-width: 2.3rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    color: #5d5d5d;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-align: center;
    text-decoration: none;
}

.rp-idioma a:hover { background: #f1ede1; }
.rp-idioma a.is-active { background: var(--fams-verde); color: #fff; }

/* ---- procura ---- */
.rp-procura {
    position: relative;
    overflow: hidden;
    padding: 3rem 3rem 2.5rem;
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0, rgba(212, 167, 60, .28), transparent 45%),
        radial-gradient(circle at 0 100%, rgba(81, 96, 36, .14), transparent 50%),
        #fffdf6;
    border: 1px solid var(--mel-linha);
    text-align: center;
}

.rp-procura.is-compacta {
    padding: 1.25rem;
    border-radius: 18px;
}

.rp-selo {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: var(--fams-verde-claro);
    color: var(--fams-verde);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rp-procura h1 {
    margin: 1rem auto .6rem;
    max-width: 560px;
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.01em;
}

.rp-intro {
    margin: 0 auto 1.75rem;
    max-width: 520px;
    color: var(--fams-texto);
    font-size: 1.05rem;
}

.rp-form {
    position: relative;
    display: flex;
    max-width: 560px;
    margin: 0 auto;
    padding: .4rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e6e1d2;
    box-shadow: 0 8px 24px rgba(26, 24, 24, .06);
}

.rp-form:focus-within {
    border-color: var(--fams-verde);
    box-shadow: 0 0 0 4px rgba(81, 96, 36, .14), 0 8px 24px rgba(26, 24, 24, .06);
}

.rp-form-icone {
    display: flex;
    align-items: center;
    padding: 0 .4rem 0 1rem;
    color: var(--mel-escuro);
}

.rp-form input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--fams-escuro);
}

.rp-form input::placeholder { color: #a3a6aa; font-weight: 600; letter-spacing: 0; }

.rp-form button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--fams-escuro);
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s ease;
}

.rp-form button:hover { background: var(--fams-castanho); }
.rp-form button:focus-visible { outline: 3px solid rgba(81, 96, 36, .5); outline-offset: 2px; }

.rp-dica {
    margin: 1rem 0 0;
    font-size: .85rem;
    color: var(--fams-suave);
}

/* ---- o que se ve (pagina inicial) ---- */
.rp-ver {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
}

.rp-ver > div {
    padding: 1.25rem 1.3rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--fams-linha);
}

.rp-ver i {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--mel-claro);
    color: var(--mel-escuro);
}

.rp-ver h2 { margin: .7rem 0 .2rem; font-size: 1rem; font-weight: 800; }
.rp-ver p { margin: 0; font-size: .88rem; color: var(--fams-texto); }

/* ---- nao encontrado ---- */
.rp-vazio {
    padding: 2.5rem 1.5rem;
    border-radius: 18px;
    background: #fff;
    text-align: center;
}

.rp-vazio-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--mel-claro);
    color: var(--mel-escuro);
    font-size: 1.5rem;
}

.rp-vazio h2 { margin: 0 0 .4rem; font-size: 1.4rem; font-weight: 800; }
.rp-vazio p { margin: 0; color: var(--fams-texto); }

/* ---- cabecalho do lote ---- */
.rp-lote {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem 2.25rem;
    border-radius: 24px;
    background: linear-gradient(135deg, #f7d77c 0%, #e5ad3a 55%, #c98a1c 100%);
    color: #2b1d07;
}

/* Favo de mel discreto, desenhado em SVG (sem imagem externa). */
.rp-lote-favo {
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 32L0 82V66l28 16 28-16v16L28 98z' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 42px 74px;
    -webkit-mask-image: linear-gradient(to left, #000 20%, transparent 75%);
    mask-image: linear-gradient(to left, #000 20%, transparent 75%);
}

.rp-lote-texto, .rp-produtor { position: relative; }

.rp-lote-rotulo {
    margin: 0;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .75;
}

.rp-lote-numero {
    margin: .1rem 0 .75rem;
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: .01em;
    word-break: break-word;
}

.rp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rp-chips li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    font-size: .9rem;
    font-weight: 800;
}

.rp-chips i { color: var(--mel-escuro); }

.rp-formatos { margin: .7rem 0 0; font-size: .9rem; font-weight: 600; opacity: .85; }

.rp-produtor {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
    padding: .6rem 1rem .6rem .6rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, .85);
}

.rp-produtor img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
}

.rp-produtor small {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6c5a2f;
}

.rp-produtor strong { display: block; font-size: 1rem; line-height: 1.2; }

/* ---- numeros ---- */
.rp-numeros {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
}

.rp-numero {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 1.15rem 1.25rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--fams-linha);
}

.rp-numero i {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .5rem;
    border-radius: 10px;
    background: var(--mel-claro);
    color: var(--mel-escuro);
}

.rp-numero strong { font-size: 1.9rem; font-weight: 900; line-height: 1.1; }
.rp-numero span { font-size: .85rem; color: var(--fams-texto); font-weight: 600; }

/* ---- cartoes ---- */
.rp-grelha {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 1.25rem;
    align-items: start;
}

.rp-cartao {
    padding: 1.6rem 1.75rem;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--fams-linha);
}

.rp-cartao h2 {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 .35rem;
    font-size: 1.15rem;
    font-weight: 800;
}

.rp-cartao h2 i { color: var(--fams-verde); }

.rp-cartao-texto { margin: 0 0 1rem; font-size: .9rem; color: var(--fams-suave); }

.rp-origem, .rp-origem ul { margin: 0; padding: 0; list-style: none; }

.rp-origem > li + li { margin-top: 1rem; }

.rp-origem > li > strong {
    display: block;
    margin-bottom: .4rem;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fams-verde);
}

.rp-origem ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem .9rem;
    border-radius: 12px;
    background: var(--fams-fundo);
}

.rp-origem ul li + li { margin-top: .4rem; }
.rp-origem ul li span { font-weight: 700; }
.rp-origem ul li em { font-style: normal; font-size: .82rem; color: var(--fams-texto); white-space: nowrap; }

.rp-perfil { margin: .75rem 0 0; }
.rp-perfil > div + div { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--fams-linha); }
.rp-perfil dt { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--fams-suave); }
.rp-perfil dd { margin: .35rem 0 0; display: flex; flex-wrap: wrap; gap: .45rem; font-weight: 700; }

.rp-cor {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .7rem .25rem .3rem;
    border-radius: 999px;
    background: var(--fams-fundo);
    font-size: .9rem;
}

.rp-cor i {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

/* ---- percurso (linha do tempo) ---- */
.rp-percurso {
    position: relative;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

/* Conector entre etapas: do fundo de cada icone ao topo do seguinte. */
.rp-percurso li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 44px;
    bottom: 0;
    left: 21px;
    width: 2px;
    background: linear-gradient(var(--mel), var(--mel-linha));
}

.rp-percurso li {
    position: relative;
    display: flex;
    gap: 1rem;
    padding-bottom: 1.4rem;
}

.rp-percurso li:last-child { padding-bottom: 0; }

.rp-etapa-icone {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--mel);
    color: var(--mel-escuro);
    z-index: 1;
}

.rp-percurso li:last-child .rp-etapa-icone {
    background: var(--fams-verde);
    border-color: var(--fams-verde);
    color: #fff;
}

.rp-percurso h3 { margin: .15rem 0 0; font-size: 1rem; font-weight: 800; }

.rp-percurso time {
    display: inline-block;
    margin: .2rem 0 .25rem;
    padding: .1rem .55rem;
    border-radius: 999px;
    background: var(--mel-claro);
    color: #7a5512;
    font-size: .82rem;
    font-weight: 800;
}

.rp-percurso p { margin: 0; font-size: .9rem; color: var(--fams-texto); }

/* ---- nota ---- */
.rp-nota {
    padding: 0 .5rem;
    text-align: center;
    font-size: .82rem;
    color: var(--fams-suave);
}

.rp-nota p { margin: 0 0 .25rem; }
.rp-nota i { color: var(--fams-verde); margin-right: .25rem; }

/* ---- ecras pequenos ---- */
@media (max-width: 760px) {
    .rp-procura { padding: 2rem 1.25rem 1.75rem; }
    .rp-procura h1 { font-size: 1.8rem; }
    .rp-form button span, .rp-form button { padding: .75rem 1rem; }
    .rp-lote { flex-direction: column; align-items: flex-start; padding: 1.6rem 1.4rem; }
    .rp-lote-numero { font-size: 2rem; }
    .rp-numeros { grid-template-columns: repeat(2, 1fr); }
    .rp-grelha, .rp-ver { grid-template-columns: 1fr; }
    .rp-cartao { padding: 1.3rem 1.2rem; }
}