/* Página de ureia, triagem por destino. Escopo: body.ureia-fotografia.
   Conteúdo estático é o padrão. A máscara diagonal só é ligada pelo script
   (.ureia-fotografia--anima), depois que cada cartão é observado. Com
   reduced-motion, o estado final fica estático e nada se move. */

.ureia-fotografia{--ur-fundo:#12303F;--ur-verde:#86C7A7;--ur-texto-claro:#BDCED8;--ur-percurso:#E9EEF0;--ur-moldura:#0C2432}

/* ================= Hero: medida, CTA e selo ================= */
.ureia-fotografia .editorial-hero__support{max-width:44ch}
.ureia-fotografia .editorial-hero .editorial-button--cotacao{background:var(--petroleo);color:#fff}
.ureia-fotografia .editorial-hero .editorial-button--cotacao:hover,
.ureia-fotografia .editorial-hero .editorial-button--cotacao:focus-visible{background:#245675}
.ureia-selo{display:inline-flex;align-items:center;gap:8px;margin:22px 0 0;padding:6px 14px;border:1px solid var(--fio-forte);border-radius:999px;font-size:16px;line-height:1.3;color:var(--petroleo)}
.ureia-selo::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ur-verde)}
/* Entrada da foto: a revelação já existe no editorial.css. Aqui só encurta. */
.js .ureia-fotografia .editorial-hero__image img{animation-duration:700ms}

/* Rótulos (kickers) em 16px: o padrão de 11px do editorial fica abaixo do mínimo de leitura desta página. */
.ureia-escolha .editorial-kicker,
.ureia-percurso .editorial-kicker{font-size:16px;font-weight:600;letter-spacing:.01em;text-transform:none;margin-bottom:0}

/* ================= Triagem: duas opções principais e ARLA à parte ================= */
.ureia-escolha{background:var(--ur-fundo);color:var(--mineral);padding:clamp(64px,7vw,104px) 0}
.ureia-escolha__cabeca{max-width:760px}
.ureia-escolha .editorial-kicker{color:var(--ur-verde)}
.ureia-escolha h2{margin:16px 0 0;font-size:clamp(36px,4vw,52px);font-weight:400;line-height:1.1;letter-spacing:-.045em;color:var(--mineral)}

.ureia-escolha__opcoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3.4vw,40px);margin-top:clamp(40px,5vw,64px)}

.ureia-cartao{min-width:0;scroll-margin-top:calc(var(--altura-cabecalho, 76px) + 24px)}
.ureia-cartao__figura{margin:0}
.ureia-cartao__moldura{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--ur-moldura)}
.ureia-cartao__moldura picture{display:block;width:100%;height:100%}
.ureia-cartao__img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(var(--zoom,1));transition:transform .5s ease}
/* A nova foto técnica já tem o equipamento no centro do enquadramento. */
.ureia-cartao__img--tecnica{object-position:center}
.ureia-cartao:hover .ureia-cartao__img,
.ureia-cartao:focus-within .ureia-cartao__img{transform:scale(calc(var(--zoom,1) * 1.03))}
.ureia-cartao__figura figcaption{margin-top:12px;font-size:16px;line-height:1.5;color:var(--ur-texto-claro)}

.ureia-cartao__texto{margin-top:28px}
.ureia-cartao__texto>.editorial-kicker{color:var(--ur-verde)}
.ureia-cartao h3{margin:12px 0 0;font-size:clamp(28px,2.6vw,36px);font-weight:400;line-height:1.14;letter-spacing:-.035em;color:var(--mineral)}
.ureia-cartao__texto>p:not(.editorial-kicker){margin:14px 0 0;max-width:44ch;font-size:16px;line-height:1.7;color:var(--ur-texto-claro)}
.ureia-cartao__cta{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding-bottom:4px;border-bottom:1px solid var(--ur-verde);font-size:16px;font-weight:600;color:var(--mineral);text-decoration:none}
.ureia-cartao__cta span{transition:transform .3s ease}
.ureia-cartao__cta:hover span,
.ureia-cartao__cta:focus-visible span{transform:translateX(4px)}
.ureia-cartao__cta:focus-visible,
.ureia-escolha__arla-link:focus-visible{outline:2px solid var(--ur-verde);outline-offset:4px}

/* ARLA pronto: orientação secundária, com foto contida e sem CTA de cotação. */
.ureia-escolha__arla{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start;margin-top:clamp(48px,6vw,80px);padding-top:clamp(28px,3vw,40px);border-top:1px solid rgba(255,255,255,.16)}
.ureia-escolha__arla-figura{margin:0}
.ureia-escolha__arla-moldura{overflow:hidden;aspect-ratio:3/2;background:var(--ur-moldura)}
.ureia-escolha__arla-moldura picture{display:block;width:100%;height:100%}
.ureia-escolha__arla-moldura img{display:block;width:100%;height:100%;object-fit:cover}
.ureia-escolha__arla-figura figcaption{margin-top:10px;font-size:16px;line-height:1.5;color:var(--ur-texto-claro)}
.ureia-escolha__arla-texto .editorial-kicker{color:var(--ur-verde)}
.ureia-escolha__arla h3{margin:12px 0 0;font-size:clamp(24px,2.2vw,30px);font-weight:400;line-height:1.2;letter-spacing:-.02em;color:var(--mineral)}
.ureia-escolha__arla-texto>p:not(.editorial-kicker){margin:12px 0 0;max-width:52ch;font-size:16px;line-height:1.65;color:var(--ur-texto-claro)}
.ureia-escolha__arla-link{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding-bottom:4px;border-bottom:1px solid var(--ur-verde);font-size:16px;font-weight:600;color:var(--mineral);text-decoration:none}
.ureia-escolha__arla-link span{transition:transform .3s ease}
.ureia-escolha__arla-link:hover span,
.ureia-escolha__arla-link:focus-visible span{transform:translateX(4px)}

/* ================= Percurso de consulta ================= */
.ureia-percurso{background:var(--ur-percurso);color:var(--petroleo);padding:clamp(64px,7vw,104px) 0;--g:32px}
.ureia-percurso__cabeca{max-width:760px}
.ureia-percurso .editorial-kicker{color:var(--petroleo)}
.ureia-percurso h2{margin:16px 0 0;font-size:clamp(36px,4vw,52px);font-weight:400;line-height:1.1;letter-spacing:-.045em;color:var(--petroleo)}
.ureia-percurso__cabeca>p:last-child{margin:20px 0 0;font-size:16px;line-height:1.7;color:var(--tinta-70)}

.ureia-percurso__lista{position:relative;list-style:none;margin:clamp(44px,5vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--g)}
.ureia-percurso__passo{position:relative;min-width:0}
.ureia-percurso__marca{position:absolute;top:0;left:0;z-index:1;width:14px;height:14px;box-sizing:border-box;border:2px solid var(--petroleo);border-radius:50%;background:var(--ur-verde)}
.ureia-percurso__passo h3{margin:40px 0 0;font-size:clamp(24px,2.2vw,30px);font-weight:500;line-height:1.2;letter-spacing:-.02em;color:var(--petroleo)}
.ureia-percurso__passo p{margin:14px 0 0;font-size:16px;line-height:1.65;color:var(--tinta-70)}

.ureia-percurso__ligacao{position:absolute;overflow:visible;pointer-events:none}
.ureia-percurso__ligacao path{fill:none;stroke:var(--petroleo);stroke-width:2}
.ureia-percurso__ligacao--h{top:5px;left:7px;width:calc(100% + var(--g));height:4px}
.ureia-percurso__ligacao--v{display:none}

/* ================= Responsivo ================= */
@media (max-width:760px){
  /* Celular: cada opção é uma linha, foto de cerca de 38% ao lado do próprio texto. */
  .ureia-escolha__opcoes{grid-template-columns:1fr;gap:36px}
  .ureia-cartao{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:16px;align-items:start}
  .ureia-cartao__moldura{aspect-ratio:4/5}
  .ureia-cartao__texto{margin-top:0}
  .ureia-cartao h3{margin-top:8px;font-size:24px}
  .ureia-escolha__arla{grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:16px}
  .ureia-escolha__arla-moldura{aspect-ratio:4/5}
  .ureia-escolha__arla-texto{margin-top:0}
}
@media (max-width:800px){
  .ureia-percurso__lista{grid-template-columns:1fr;gap:0;margin-top:36px}
  .ureia-percurso__passo{padding-left:44px;padding-bottom:36px}
  .ureia-percurso__passo h3{margin-top:0}
  .ureia-percurso__ligacao--h{display:none}
  .ureia-percurso__ligacao--v{display:block;top:14px;left:5px;width:4px;height:calc(100% - 14px)}
}

/* ================= Movimento (só com JS e sem reduced-motion) ================= */
/* Máscara diagonal: o recorte parte da diagonal à esquerda e varre até cobrir a foto. */
.ureia-fotografia--anima .ureia-cartao:not(.is-visivel) .ureia-cartao__moldura{clip-path:polygon(0 0,0 0,-12% 100%,-12% 100%)}
.ureia-fotografia--anima .ureia-cartao.is-visivel .ureia-cartao__moldura{clip-path:polygon(0 0,100% 0,100% 100%,-12% 100%);transition:clip-path .6s cubic-bezier(.22,1,.36,1) calc(var(--i) * 120ms)}

.ureia-fotografia--anima .ureia-percurso__marca{opacity:0;transform:scale(.3)}
.ureia-fotografia--anima .ureia-percurso__passo h3,
.ureia-fotografia--anima .ureia-percurso__passo p{opacity:0;transform:translateY(10px)}
.ureia-fotografia--anima .ureia-percurso__ligacao path{stroke-dasharray:1;stroke-dashoffset:1}
.ureia-fotografia--anima .ureia-percurso.is-visivel .ureia-percurso__marca{opacity:1;transform:none;transition:opacity .5s ease calc(var(--i) * 220ms),transform .5s cubic-bezier(.22,1,.36,1) calc(var(--i) * 220ms)}
.ureia-fotografia--anima .ureia-percurso.is-visivel .ureia-percurso__passo h3,
.ureia-fotografia--anima .ureia-percurso.is-visivel .ureia-percurso__passo p{opacity:1;transform:none;transition:opacity .6s ease calc(var(--i) * 220ms + 160ms),transform .6s ease calc(var(--i) * 220ms + 160ms)}
.ureia-fotografia--anima .ureia-percurso.is-visivel .ureia-percurso__ligacao path{stroke-dashoffset:0;transition:stroke-dashoffset .6s ease calc(var(--i) * 220ms + 200ms)}

@media (prefers-reduced-motion: reduce){
  .ureia-fotografia .ureia-cartao__moldura{clip-path:none!important}
  .ureia-fotografia .ureia-percurso__marca,
  .ureia-fotografia .ureia-percurso__passo h3,
  .ureia-fotografia .ureia-percurso__passo p{opacity:1!important;transform:none!important}
  .ureia-fotografia .ureia-percurso__ligacao path{stroke-dashoffset:0!important}
  .ureia-fotografia *,
  .ureia-fotografia *::before,
  .ureia-fotografia *::after{transition:none!important;animation:none!important}
}