.dg-seccion {
  background: var(--crema);
  padding: var(--espacio-8) 0;
  overflow-x: hidden;
}

.dg-contenedor {
  max-width: 40rem;
}

.dg-titulo-seccion {
  margin-bottom: var(--espacio-6);
}

.dg-barra {
  height: 4px;
  margin-bottom: var(--espacio-6);
  border-radius: var(--radio-pill);
  background: rgb(22 30 46 / 12%);
  overflow: hidden;
}

.dg-barra-relleno {
  width: 0;
  height: 100%;
  background: var(--marino);
  transition: width 300ms ease;
}

.dg-ventana {
  overflow: hidden;
}

.dg-paso {
  animation: dg-entrar 300ms ease both;
}

@keyframes dg-entrar {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.dg-pregunta {
  margin-bottom: var(--espacio-5);
  font-size: 1.375rem;
}

.dg-pregunta:focus,
.dg-resultado-titulo:focus {
  outline: none;
}

.dg-opciones {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}

.dg-opcion {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1.25rem;
  border: 2px solid var(--marino);
  border-radius: var(--radio-md);
  background: transparent;
  color: var(--marino);
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transicion), color var(--transicion);
  -webkit-tap-highlight-color: transparent;
}

.dg-opcion:hover {
  background: var(--marino);
  color: var(--crema);
}

.dg-opcion:focus-visible {
  outline: 3px solid var(--marino);
  outline-offset: 3px;
}

.dg-resultado-titulo {
  margin-bottom: var(--espacio-5);
  font-size: 1.375rem;
}

.dg-tarjeta {
  margin-bottom: var(--espacio-5);
  padding: var(--espacio-5);
  border: 1px solid rgb(22 30 46 / 14%);
  border-radius: var(--radio-lg);
  background: #fff;
  box-shadow: var(--sombra-suave);
}

.dg-tarjeta-nombre {
  margin-bottom: var(--espacio-4);
  font-size: 1.5rem;
}

.dg-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dg-lista li {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-3);
  margin-bottom: var(--espacio-3);
}

.dg-lista svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.4rem;
  fill: var(--marino);
}

.dg-extra {
  margin: var(--espacio-4) 0 0;
  color: var(--gris);
  font-size: 0.875rem;
}

.dg-cierre {
  margin-bottom: var(--espacio-5);
}

.dg-btn-icono {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .dg-paso {
    animation: none;
  }

  .dg-barra-relleno {
    transition: none;
  }
}