:root {
  --ink: #073844;
  --ink-soft: #345b63;
  --teal: #078a95;
  --teal-dark: #056b74;
  --teal-soft: #e8f8f7;
  --red: #e94f4b;
  --red-dark: #c83d3b;
  --gold: #ffc654;
  --green: #15966b;
  --muted: #587279;
  --line: #d7e5e3;
  --paper: #f4faf9;
  --shadow: 0 24px 60px rgba(7,56,68,.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 85% 6%, #ddf3f1 0, transparent 28%), linear-gradient(145deg,#f8fbfa,#edf8f6); font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
header { min-height: 86px; padding: 14px max(24px,calc((100vw - 1180px)/2)); position: sticky; z-index: 4; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); box-shadow: 0 7px 24px rgba(7,56,68,.04); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px 16px 16px 6px; color: white; background: linear-gradient(145deg,#ef5b55,#cb3f3d); box-shadow: 0 12px 28px rgba(233,79,75,.22); font-size: 38px; line-height: 1; }
.brand b { font-size: 22px; letter-spacing: .04em; }.brand small { margin-top: 4px; display: block; color: var(--teal); font-size: 9px; letter-spacing: .3em; }
.back-link { padding: 10px 14px; display: inline-flex; align-items: center; gap: 8px; border-radius: 11px; color: var(--teal-dark); background: var(--teal-soft); font-size: 13px; font-weight: 850; text-decoration: none; }.back-link span { font-size: 17px; }
main { width: min(1180px,calc(100% - 36px)); margin: 40px auto 90px; display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 26px; align-items: start; }
article, aside { border: 1px solid var(--line); border-radius: 28px; background: white; box-shadow: var(--shadow); }
article { overflow: hidden; }.record-head { padding: clamp(28px,4vw,48px) clamp(24px,4vw,52px) 0; }
aside { padding: 28px; position: sticky; top: 112px; } aside strong { font-size: 24px; } aside p { color: var(--muted); line-height: 1.65; }
aside a,.main-link { padding: 13px 18px; display: inline-flex; border-radius: 12px; color: white; background: var(--teal); font-weight: 800; text-decoration: none; }
.eyebrow,.section-kicker,.share-kicker { margin: 0 0 10px; color: var(--red); font-size: 10px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
h1 { max-width: 780px; margin: 0 0 14px; font-size: clamp(40px,6vw,68px); line-height: .98; letter-spacing: -.05em; overflow-wrap: anywhere; }
.subtitle { margin: 0 0 24px; color: var(--muted); font-size: clamp(18px,2.5vw,25px); }
.status { margin-bottom: 30px; padding: 14px 17px; display: flex; flex-wrap: wrap; align-items: center; gap: 9px 22px; border: 1px solid #cfe9db; border-radius: 15px; background: #eff9f4; }.status b { color: #087c50; }.status span { color: var(--muted); }
.record-grid { padding: 0 clamp(24px,4vw,52px); display: grid; grid-template-columns: minmax(250px,.78fr) 1.22fr; gap: 32px; align-items: start; }
.record-media { min-width: 0; }.record-photo,.record-placeholder { width: 100%; aspect-ratio: 4/5; border: 1px solid var(--line); border-radius: 22px; background: #eef5f4; }.record-photo { display: block; object-fit: contain; }
.record-placeholder { display: grid; place-items: center; color: var(--teal); font-size: 34px; font-weight: 900; letter-spacing: .08em; text-align: center; }.record-placeholder > span { font-size: 13px; letter-spacing: .3em; }
.record-placeholder-closed { padding: 28px; align-content: center; gap: 10px; color: #0e7155; background: linear-gradient(145deg,#effaf5,#dff4e9); letter-spacing: 0; }.record-placeholder-closed i { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-size: 28px; font-style: normal; }.record-placeholder-closed strong { font-size: 20px; }.record-placeholder-closed span { max-width: 240px; color: #56786d; font-size: 12px; line-height: 1.55; letter-spacing: 0; }
.record-grid section { padding: 8px 0; }.record-grid h2 { margin: 0 0 14px; font-size: 27px; }.record-grid section > p:not(.section-kicker) { margin: 0 0 24px; color: var(--ink-soft); font-size: 17px; line-height: 1.65; }
dl { margin: 0; padding-top: 19px; display: grid; grid-template-columns: 105px 1fr; gap: 11px 16px; border-top: 1px solid var(--line); } dt { color: var(--muted); font-weight: 800; } dd { margin: 0; overflow-wrap: anywhere; } dd strong { color: var(--teal-dark); }
.share-box { margin: 38px clamp(24px,4vw,52px) clamp(24px,4vw,52px); padding: clamp(22px,3vw,30px); border: 1px solid #cce3e1; border-radius: 24px; background: linear-gradient(145deg,#f5fbfa,#eaf7f6); box-shadow: inset 0 1px 0 white; }
.share-heading { display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-items: start; }.share-heading h2 { margin: 1px 0 7px; font-size: 28px; }.share-heading p:last-child { max-width: 640px; margin: 0; color: var(--muted); line-height: 1.55; }
.share-mark { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; color: white; background: linear-gradient(145deg,var(--red),var(--red-dark)); box-shadow: 0 10px 24px rgba(233,79,75,.22); font-size: 25px; font-weight: 900; }.share-kicker { color: var(--teal); }
.share-actions { display: flex; flex-wrap: wrap; gap: 10px; }.share-actions-main { margin-top: 24px; }.share-button { min-height: 48px; padding: 8px 16px 8px 9px; display: inline-flex; align-items: center; gap: 9px; border: 1px solid transparent; border-radius: 13px; color: var(--ink); background: white; box-shadow: 0 7px 18px rgba(7,56,68,.07); font: inherit; font-size: 12px; text-decoration: none; cursor: pointer; transition: transform .16s,box-shadow .16s; }.share-button:hover { transform: translateY(-2px); box-shadow: 0 10px 23px rgba(7,56,68,.12); }.share-button span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; font-weight: 900; }
.share-native { color: white; background: linear-gradient(135deg,var(--red),var(--red-dark)); }.share-native span { background: rgba(255,255,255,.16); }.share-whatsapp { color: white; background: #188b62; }.share-whatsapp span { background: rgba(255,255,255,.16); font-size: 10px; }.share-copy { border-color: #bcd9d7; color: var(--teal-dark); }
.share-divider { margin: 22px 0 13px; display: flex; align-items: center; gap: 12px; color: #789095; font-size: 9px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }.share-divider::after { content: ""; height: 1px; flex: 1; background: #cfe1df; }.share-actions-social .share-button { min-height: 42px; padding-block: 5px; }.share-facebook span { color: white; background: #2474d2; font-size: 17px; }.share-x span { color: white; background: #101719; font-size: 15px; }
.share-resources { margin-top: 22px; padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid #d7e6e4; border-radius: 17px; background: rgba(255,255,255,.78); }.share-resources strong { font-size: 13px; }.share-resource-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }.share-resource-actions a { min-height: 38px; padding: 8px 11px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #c9dcda; border-radius: 10px; color: var(--ink); background: white; font-size: 10px; font-weight: 800; text-decoration: none; }.share-resource-actions span { color: var(--teal); font-size: 15px; }
.share-feedback { min-height: 18px; margin: 13px 0 0; color: #08734f; font-size: 11px; font-weight: 750; }.share-closed { background: linear-gradient(145deg,#f1faf5,#e4f5ec); }.share-mark-closed { background: linear-gradient(145deg,#27a77d,#117153); }.share-closed .share-heading p:last-child { color: #507268; }
.confirmation { min-height: 100vh; margin: 0 auto; display: grid; place-items: center; }.confirmation article { max-width: 720px; padding: 42px; text-align: center; }.confirmation h1 { font-size: clamp(42px,8vw,72px); }

@media (max-width: 820px) {
  header { min-height: 70px; padding-inline: 16px; }.brand > span { width: 42px; height: 42px; font-size: 29px; }.brand b { font-size: 17px; }.brand small { font-size: 7px; }.back-link { padding: 9px 10px; font-size: 10px; }
  main { grid-template-columns: 1fr; margin-top: 18px; }.record-grid { grid-template-columns: 1fr; }.record-photo,.record-placeholder { max-height: 560px; }.record-grid section { padding-top: 0; } aside { position: static; } article { border-radius: 22px; }
  .share-resources { align-items: stretch; flex-direction: column; }.share-resource-actions { justify-content: flex-start; }
}

@media (max-width: 520px) {
  main { width: min(100% - 20px,470px); margin-bottom: 40px; }.record-head { padding: 25px 18px 0; } h1 { font-size: clamp(38px,13vw,55px); }.subtitle { font-size: 17px; line-height: 1.45; }.status { align-items: flex-start; flex-direction: column; }
  .record-grid { padding-inline: 18px; gap: 22px; }.record-grid h2 { font-size: 24px; } dl { grid-template-columns: 90px 1fr; font-size: 13px; }
  .share-box { margin: 30px 10px 10px; padding: 20px 15px; border-radius: 20px; }.share-heading { grid-template-columns: 44px 1fr; gap: 12px; }.share-mark { width: 44px; height: 44px; border-radius: 14px; }.share-heading h2 { font-size: 23px; }.share-heading p:last-child { font-size: 12px; }
  .share-actions-main .share-button { flex: 1 1 100%; }.share-actions-social .share-button { flex: 1 1 130px; }.share-resource-actions { display: grid; grid-template-columns: 1fr; }.share-resource-actions a { width: 100%; }
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto!important; transition-duration: .01ms!important; } }