/* Pantallas finales del formulario: éxito, fuera de Bogotá, Kit de consentidos y diálogo de la tarjeta. */

/* ---------- Resultados ---------- */

.result {
  display: grid;
  gap: var(--space-5);
}

.result:focus {
  outline: none;
}

.result__title {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-variation-settings: "WONK" 1;
}

.result__lead {
  font-size: 1.0625rem;
}

.result__lead strong {
  font-family: var(--font-display);
  color: var(--color-primary-strong);
}

.result__actions {
  display: grid;
  gap: var(--space-3);
}

.result__subtitle {
  margin-top: var(--space-2);
  font-size: 1.25rem;
}

.result__badge {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--color-paper);
  color: var(--color-primary);
}

.result--outside {
  justify-items: start;
}

@media (prefers-reduced-motion: no-preference) {
  .result:not([hidden]) > * {
    animation: result-in var(--duration-slow) var(--ease-out) both;
  }

  .result:not([hidden]) > :nth-child(2) { animation-delay: 60ms; }
  .result:not([hidden]) > :nth-child(3) { animation-delay: 120ms; }
  .result:not([hidden]) > :nth-child(n + 4) { animation-delay: 180ms; }

  .result--success:not([hidden]) .success-print__code {
    animation: stamp 620ms var(--ease-out) 420ms both;
  }
}

@keyframes result-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes stamp {
  from {
    opacity: 0;
    transform: rotate(-10deg) scale(1.5);
  }
}

.success-print {
  position: relative;
  display: grid;
  justify-items: center;
  padding: var(--space-6) var(--space-4) var(--space-8);
  border-radius: var(--radius-board);
  background: var(--color-wood) url("/img/textura-tablon-1024.webp") center / cover;
  box-shadow: var(--shadow-board);
}

.success-print__print {
  --tilt: -2deg;
  max-width: 100%;
  padding: 12px 12px 0;
}

.success-print__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 20rem;
}

.success-print__family {
  max-width: 18rem;
  padding: var(--space-3) var(--space-1);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-heading);
  overflow-wrap: anywhere;
}

.success-print__code {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-radius: 18px;
  background: var(--color-primary);
  box-shadow: var(--shadow-print-lift);
  font-family: var(--font-display);
  font-size: var(--text-code);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--color-on-primary);
  transform: rotate(5deg);
}

.timeline {
  display: grid;
  margin: 0;
}

.timeline__item {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 0 0 var(--space-4) var(--space-6);
}

.timeline__item::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: inset 0 0 0 3px var(--color-primary);
}

.timeline__item::after {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 2px;
  left: 9px;
  width: 2px;
  background: var(--color-border);
}

.timeline__item:last-child::after {
  display: none;
}

.timeline__when {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-primary-strong);
}

.visit-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-input);
  background: var(--color-heading);
  color: var(--color-on-dark-muted);
}

.visit-note strong {
  color: var(--color-on-dark);
}

.visit-note .icon {
  color: var(--color-wood-light);
}

/* ---------- Kit de consentidos ---------- */

.kit {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  padding-top: var(--space-5);
  border-top: 1.5px dashed var(--color-wood-light);
}

.kit__title {
  font-size: 1.375rem;
}

.kit__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-3);
  margin: 0;
}

.kit-tag {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-4) var(--space-3) calc(22px + var(--space-5));
  background: var(--color-paper);
  clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 50%);
  transition: background-color var(--duration-fast) var(--ease-out);
}

.kit-tag:hover {
  background: color-mix(in srgb, var(--color-wood-light) 28%, var(--color-paper));
}

.kit-tag::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 20px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: inset 0 1px 2px rgba(46, 35, 32, 0.35);
}

.kit-tag__species {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-wood-dark);
}

.kit-tag__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-heading);
}

.kit-tag__blurb {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.kit-tag__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 800;
}

.kit-tag__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.kit-tag__link .icon {
  transition: transform var(--duration-fast) var(--ease-out);
}

.kit-tag:hover .kit-tag__link .icon {
  transform: translateX(3px);
}

.kit__shipping {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-success-strong);
}

/* ---------- Diálogo de la tarjeta ---------- */

.story-dialog {
  width: min(100% - 2rem, 24rem);
}

.story-dialog__img {
  width: 100%;
  height: auto;
  max-height: 58dvh;
  border-radius: 12px;
  background: var(--color-paper);
  object-fit: contain;
  -webkit-touch-callout: default;
  user-select: auto;
}